Angularjs page Filter tab small function _angularjs

ANGULARJS Introduction

ANGULARJS is a JavaScript framework. It can be added to the HTML page through the <script> tag.

ANGULARJS extends HTML through instructions and binds data to HTML through an expression.

ANGULARJS is a JavaScript framework

ANGULARJS is a JavaScript framework. It's a library written in JavaScript.

Angularjs is published as a JavaScript file and can be added to a Web page through a script tag:

<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script>

The following are for this article to introduce ANGULARJS page filter label function to do matting, the key content please see the following introduction:

Page HTML:

<div class= "bar Bar-calm bar-header" > <div class= "title" > News classification </div> <button class= "button button-balanced cleanbtn "ng-click=" clean () > Empty </button> </div> <ion-content class= "Content" Scroll= "false" > <ul class= "Filter-item" > <li> <p> Country area:</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> Capital:</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> </ ul> </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 class= "button Button-calm confirmbtn" ng-click= "infOsref () "> Confirmation </button>  

Page BUILD:　　

A total of 5 large items, through the ng-repeat to generate each of the small category labels under each major item.

Requirements Analysis: The user clicks on each filter label, adds its selected label name to an array, and sends the array to the background for the background programmer to filter.

JS Code:

News Filter Data Classification (analog data) $scope. category={regions:[{name: "Regions_china", CN: "China", Checked:false},{name: "Regions_ UnitedStates ", CN:" The USA ", Checked:false},{name:" Regions_unitedkingdom ", CN:" England ", Checked:false},{name:" Regions_ Eurozone ", CN:" Europe ", Checked:false},{name:" Regions_japan ", CN:" Japan ", Checked:false},{name:" Regions_canada ", CN:" Canada ", Checked:false},{name: "Regions_australia", CN: "Australia", Checked:false},{name: "Regions_switzerland", CN: "Switzerland", checked: False},{name: "Regions_others", CN: "Other", Checked:false}], Capitals:[{name: "Capitals_foreignexchange", CN: "Foreign exchange", Checked:false},{name: "Capitals_stocks", CN: "Public Debt", Checked:false},{name: "Capitals_commodities", CN: "Goods", checked: False},{name: "Capitals_bondsbonds", CN: "Brand", Checked:false}], Scopes:[{name: "Scopes_macroscopic", CN: "Whole", checked:
False},{name: "Scopes_industrial", CN: "Industry", Checked:false},{name: "Scopes_company", CN: "Company", Checked:false}], Economicdata:[{name: "Economicdata_yes", CN: "Economic Information", checked:false}], Centralbank:[{name: "Centralbank_yes", CN: "
Central bank data ", Checked:false}]}; Traverse Data LookupIncoming object with the same name under name (used to find out where the user clicked the object in the simulated data) 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}}}; This method is mainly at the beginning of the page will receive an array to the Item, by traversing the array and analog data to check the selected state of the label Let Init= () =>{let item=
Appsettings.filterinfoscategories; for (Var i=0;i<item.length;i++) {var samename=eachlist (item[i]);//Because the entire method executes two times, the reason is not found, so add whether or not to repeat the judgment if ($
Scope.categories.indexOf (samename.name) <0) {$scope. Categories.push (Samename.name);}}
};
Init (); Filter the category array (after the user clicks on the tag, the name of the incoming click and whether it is selected, if the name of the label in the outgoing array is removed, and if it is not selected, join the outgoing array) $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);}}
}
}; The confirmation button $scope. Infosref = () => {$scope. oNcategorychange ();
$scope. Modal.hide ();
};
Empty $scope. clean= () => {let che=$ ("input:checked");//This cannot be cleared by assigning to [], the outside has been copied.
$scope. categories.length=0;
Che.each (function (k,filterinput) {filterinput.checked=false;});
$scope. Infosref ();  }
}

The above is a small set to introduce the ANGULARJS page filter label small function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!