SoFunction
Updated on 2025-04-04

AngularJs page filtering tag function

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 the script tag:

<script src="/libs//1.4.6/"></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:

&lt;div class="bar bar-calm bar-header"&gt;
&lt;div class="title"&gt;News Classification&lt;/div&gt;
&lt;button class="button button-balanced cleanbtn" ng-click="clean()"&gt;Clear&lt;/button&gt;
&lt;/div&gt;
&lt;ion-content class="content" scroll="false"&gt;
&lt;ul class="filter-item"&gt;
&lt;li&gt;
&lt;p&gt;Country and Region:&lt;/p&gt;
&lt;ul&gt;
&lt;li ng-repeat="RegionsName in " ng-click="onClick(,)"&gt;
&lt;input type="checkbox" value="" ng-checked=""/&gt;
&lt;span&gt;{{}}&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;capital:&lt;/p&gt;
&lt;ul&gt;
&lt;li ng-repeat="CapitalsName in " ng-click="onClick(,)"&gt;
&lt;input type="checkbox" value="" ng-checked=""/&gt;
&lt;span&gt;{{}}&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;field:&lt;/p&gt;
&lt;ul&gt;
&lt;li ng-repeat="ScopesName in " ng-click="onClick(,)"&gt;
&lt;input type="checkbox" value="" ng-checked=""/&gt;
&lt;span&gt;{{}}&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Economic Information:&lt;/p&gt;
&lt;ul&gt;
&lt;li ng-repeat="EconomicData in " ng-click="onClick(,)"&gt;
&lt;input type="checkbox" value="" ng-checked=""/&gt;
&lt;span&gt;{{}}&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Central Bank Data:&lt;/p&gt;
&lt;ul&gt;
&lt;li ng-repeat="CentralBank in " ng-click="onClick(,)"&gt;
&lt;input type="checkbox" value="" ng-checked=""/&gt;
&lt;span&gt;{{}}&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;button class="button button-calm confirmbtn" ng-click="infosRef()"&gt;confirm&lt;/button&gt; 

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)$={
Regions:[{name:"Regions_China",cn:"China",checked:false},{name:"Regions_UnitedStates",cn:"USA",checked:false},{name:"Regions_UnitedKingdom",cn:"U.K",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:"Forex",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:"overall",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}]
};
//Travel through the data and find the object with the same name passed in the name (used to find out the location of the object in the simulated data that the user clicks)var EachList=(name)=&gt;{
let category=$;
for( var k in category){
for(var j in category[k]){
if(category[k][j].name==name){
var sameName=category[k][j];
=true;
return sameName
}
}
}
};
//This method mainly receives an array to Item at the beginning, and selects the label that was selected from the beginning by traversing the array and simulated data.let init=()=&gt;{
let Item=;
for(var i=0;i&lt;;i++){
var sameName=EachList(Item[i]);
//Because the whole method will be executed twice, the reason has not been found yet, so a judgment on whether it is repeated is addedif($()&lt;0){
$();
}
}
};
init();
//Filter the classification array (after the user clicks the tag, the tag name and whether it is selected. If it is in, the tag name of the same name in the array to be transmitted will be removed. If it is not selected, add it to the array to be transmitted)$=(filterItem,check)=&gt;{
var sameName=EachList(filterItem);
if(!check){
=true;
$(filterItem);
}else{
=false;
for(var i=0;i&lt;$;i++){
if($[i]===filterItem){
$(i,1);
}
}
}
};
//Confirm Button$ = () =&gt; {
$();
$();
};
//Clear$=() =&gt; {
let che=$("input:checked");
//This cannot be cleared by assigning the value to [], the outside has been copied and referenced.$=0;
(function(k,filterInput){
=false;
});
$();
}
} 

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 for my website!