AngularJs Page Filter Tag Feature

Introduction to AngularJS

AngularJS is an JavaScript framework. It can pass through < script > Tag is added to the HTML page.

AngularJS extends HTML through instructions and binds data to HTML through expressions.

AngularJS is an JavaScript framework

AngularJS is an JavaScript framework. It is a library written in JavaScript.

AngularJS is published as an JavaScript file that can be added to a Web page via an script tag:

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

The following are the foreshadowing for this article to introduce angularjs page filtering label function. Please see the following introduction for key contents:

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 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> 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()"> Confirm </button> 

Page construction:

It is divided into five major items in total, and the small classification labels under each major item are generated by ng-repeat.

Requirements analysis: Users click on each filter label, add the selected label name to an array, and send the array to the background for background programmers to filter.

js code:

// Classification of news screening data (simulated data) 
$scope.category={
Regions:[{name:"Regions_China",cn:" China ",checked:false},{name:"Regions_UnitedStates",cn:" United States ",checked:false},{name:"Regions_UnitedKingdom",cn:" Britain ",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:" Others ",checked:false}],
Capitals:[{name:"Capitals_ForeignExchange",cn:" Foreign exchange ",checked:false},{name:"Capitals_Stocks",cn:" Public debt ",checked:false},{name:"Capitals_Commodities",cn:" Commodity ",checked:false},{name:"Capitals_BondsBonds",cn:" Brand ",checked:false}],
Scopes:[{name:"Scopes_Macroscopic",cn:" Holistic ",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}]
};
// Traversing data lookup incoming name Object with the same name below (used to find the location of the object clicked by the user 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.checked=true;
return sameName
}
}
}
};
// This method is mainly in the page 1 Will receive at first 1 Array to Item Checked by traversing the array and simulating data 1 Label with selected status 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, and the reason has not been found yet, the judgment of whether to repeat is added 
if($scope.categories.indexOf(sameName.name)<0){
$scope.categories.push(sameName.name);
}
}
};
init();
// Filter the classified array (after the user clicks the label, pass in the clicked label name and whether it is in the selected state; If it is, remove the label name with the same name from the outgoing array; If it is not selected, add it   In this array to be outgoing) 
$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();
};
// Empty 
$scope.clean=() => {
let che=$("input:checked");
// You cannot assign a value to [] To clear, the outside has been copied and referenced. 
$scope.categories.length=0;
che.each(function(k,filterInput){
filterInput.checked=false;
});
$scope.infosRef();
}
}