AngularJS Introduction
AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag.
AngularJS extends HTML through directives and binds data to HTML through expressions.
AngularJS is a JavaScript framework
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is published as a JavaScript file and can be added to the web page through script tags:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
The following are all for the introduction of the angularjs page filtering tag function in this article. Please see the following introduction to the key content:
Page html:
<div><div>News Category</div><button ng-click="clean()">Clear</button></div><ion-content scroll="false"><ul><li><p>Country and Region:</p><ul><li ng-repeat="RegionsName in category.Regions" ng-click="onClick(RegionsName.name,RegionsName.checked)"><input type="checkbox" value="RegionsName.name" ng-checked="RegionsName.checked"/><span>{{RegionsName.cn}}</span></li></ul></li><li><p>Capitals:</p><ul><li ng-repeat="CapitalsName in category.Capitals" ng-click="onClick(CapitalsName.name,CapitalsName.checked)"><input type="checkbox" value="CapitalsName.name" ng-checked="CapitalsName.checked"/><span>{{CapitalsName.cn}}</span></li></ul></li><li><p>Domain:</p><ul><li ng-repeat="ScopesName in category.Scopes" ng-click="onClick(ScopesName.name,ScopesName.checked)"><input type="checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/><span>{{ScopesName.cn}}</span></li></li></li><li><p>Economic information:</p><ul><li ng-repeat="EconomicData in category.EconomicData" ng-click="onClick(EconomicData.name,EconomicData.checked)"><input type="checkbox" value="EconomicData.name" ng-checked="EconomicData.checked"/><span>{{EconomicData.cn}}</span></li></ul></li><li><p>Central Bank Data:</p><ul><li ng-repeat="CentralBank in category.CentralBank" ng-click="onClick(CentralBank.name,CentralBank.checked)"><input type="checkbox" value="CentralBank.name" ng-checked="CentralBank.checked"/><span>{{CentralBank.cn}}</span></li></ul></li></ul><button ng-click="infosRef()">Confirm</button>Page building:
It is divided into 5 major items in total, and small classification tags under each major item are generated through ng-repeat.
Requirement analysis: The user clicks on each filter tag, adds the selected tag name to an array, and sends the array to the background for background programmers to filter.
js code:
//News Filter Data Classification (Simulation Data)$scope.category={Regions:[{name:"Regions_China",cn:"China",checked:false},{name:"Regions_UnitedStates",cn:"US",checked:false},{name:"Regions_UnitedKingdom",cn:"UK",checked:false},{name:"Regions_Eurozone",cn:"Europe",checked:false},{name:"Regions_Ja pan",cn:"Japan",checked:false},{name:"Regions_Canada",cn:"Canada",checked:false},{name:"Regions_Australia",cn:"Australia",checked:false},{name:"Regions_Switzerland",cn:"Switzerland",cn:"Switzerland",checked:false},{name:"Regions_Others",cn:"Others",checked:false}],Capitals:[{name:"Capitals_ForeignE xchange",cn:"Forex",checked:false},{name:"Capitals_Stocks",cn:"Treasury",checked:false},{name:"Capitals_Commodities",cn:"Commodities",checked:false},{name:"Capitals_BondsBonds",cn:"Brand",checked:false}],Scopes:[{name:"Scopes_Macroscopic",cn:"Overall",checked:false},{name:"Scopes_In dustrial",cn:"Industrial",checked:false},{name:"Scopes_Company",cn:"Company",checked:false}],EconomicData:[{name:"EconomicData_Yes",cn:"Economic Data",checked:false}],CentralBank:[{name:"CentralBank_Yes",cn:"CentralBank Data",checked:false}]};//Travel the data to find the object with the same name under the incoming name (used to find out the object location in the simulated data that the user clicks) var EachList=(name)=>{let category=$scope.category;for( var k in category){for(var j in category[k]){if(category[k][j].name==name){var sameName=category[k][j];sameName.checked=true;return sameName}}}};//This method mainly receives an array to Item at the beginning, and checks the label that was selected as the selected state by traversing the array and simulated data at the beginning let init=()=>{let Item=appSettings.filterInfosCategories; for(var i=0;i<Item.length;i++){var sameName=EachList(Item[i]);//Because the whole method will be executed twice, the reason has not been found yet, so the judgment of whether to repetitively is added if($scope.categories.indexOf(sameName.name)<0){$scope.categories.push(sameName.name);}}};init();//Filter the classification array (after the user clicks the tag, the tag name passed in and whether it is in the selected state. If it is in, the tag name of the same name in the array to be passed out is removed. If it is not selected, add it to the array to be passed out)$scope.onClick=(filterItem,check)=>{var sameName=EachList(filterItem);if(!check){sameName.checked=true;$scope.categories.push(filterItem);}else{sameName.checked=false;for(var i=0;i<$scope.categories.length;i++){if($scope.categories[i]===filterItem){$scope.categories.splice(i,1);}}}};//Confirm button$scope.infosRef = () => {$scope.onCategoryChange();$scope.modal.hide();};//Clear $scope.clean=() => {let che=$("input:checked");//This cannot be cleared by assigning the value to [], and the outside has been copied and referenced. $scope.categories.length=0;che.each(function(k,filterInput){filterInput.checked=false;});$scope.infosRef();}}The above is the small function of AngularJs page filtering tags introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!