AngularJs页面筛选标签小功能
AngularJS简介
AngularJS是一个JavaScript框架。它可通过<script>标签添加到HTML页面。
AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。
AngularJS是一个JavaScript框架
AngularJS是一个JavaScript框架。它是一个以JavaScript编写的库。
AngularJS是以一个JavaScript文件形式发布的，可通过script标签添加到网页中：
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
下面都是为本文介绍angularjs页面筛选标签功能做铺垫的，重点内容请看下面介绍：
页面html：
<divclass="barbar-calmbar-header">
<divclass="title">新闻分类</div>
<buttonclass="buttonbutton-balancedcleanbtn"ng-click="clean()">清空</button>
</div>
<ion-contentclass="content"scroll="false">
<ulclass="filter-item">
<li>
<p>国家地区:</p>
<ul>
<ling-repeat="RegionsNameincategory.Regions"ng-click="onClick(RegionsName.name,RegionsName.checked)">
<inputtype="checkbox"value="RegionsName.name"ng-checked="RegionsName.checked"/>
<span>{{RegionsName.cn}}</span>
</li>
</ul>
</li>
<li>
<p>资本:</p>
<ul>
<ling-repeat="CapitalsNameincategory.Capitals"ng-click="onClick(CapitalsName.name,CapitalsName.checked)">
<inputtype="checkbox"value="CapitalsName.name"ng-checked="CapitalsName.checked"/>
<span>{{CapitalsName.cn}}</span>
</li>
</ul>
</li>
<li>
<p>领域:</p>
<ul>
<ling-repeat="ScopesNameincategory.Scopes"ng-click="onClick(ScopesName.name,ScopesName.checked)">
<inputtype="checkbox"value="ScopesName.name"ng-checked="ScopesName.checked"/>
<span>{{ScopesName.cn}}</span>
</li>
</ul>
</li>
<li>
<p>经济资料:</p>
<ul>
<ling-repeat="EconomicDataincategory.EconomicData"ng-click="onClick(EconomicData.name,EconomicData.checked)">
<inputtype="checkbox"value="EconomicData.name"ng-checked="EconomicData.checked"/>
<span>{{EconomicData.cn}}</span>
</li>
</ul>
</li>
<li>
<p>中央银行数据:</p>
<ul>
<ling-repeat="CentralBankincategory.CentralBank"ng-click="onClick(CentralBank.name,CentralBank.checked)">
<inputtype="checkbox"value="CentralBank.name"ng-checked="CentralBank.checked"/>
<span>{{CentralBank.cn}}</span>
</li>
</ul>
</li>
</ul>
<buttonclass="buttonbutton-calmconfirmbtn"ng-click="infosRef()">确认</button>
页面构建：
总共分为5个大项，通过ng-repeat生成每个大项下的小分类标签。
需求分析：用户点击每一个筛选标签，将其所选的标签名称加入一个数组中，并将该数组发送到后台供后台程序员筛选。
js代码：
//新闻筛选数据分类（模拟数据）
$scope.category={
Regions:[{name:"Regions_China",cn:"中国",checked:false},{name:"Regions_UnitedStates",cn:"美国",checked:false},{name:"Regions_UnitedKingdom",cn:"英国",checked:false},{name:"Regions_Eurozone",cn:"欧洲",checked:false},{name:"Regions_Japan",cn:"日本",checked:false},{name:"Regions_Canada",cn:"加拿大",checked:false},{name:"Regions_Australia",cn:"澳大利亚",checked:false},{name:"Regions_Switzerland",cn:"瑞士",checked:false},{name:"Regions_Others",cn:"其他",checked:false}],
Capitals:[{name:"Capitals_ForeignExchange",cn:"外汇",checked:false},{name:"Capitals_Stocks",cn:"公债",checked:false},{name:"Capitals_Commodities",cn:"商品",checked:false},{name:"Capitals_BondsBonds",cn:"品牌",checked:false}],
Scopes:[{name:"Scopes_Macroscopic",cn:"整体",checked:false},{name:"Scopes_Industrial",cn:"工业",checked:false},{name:"Scopes_Company",cn:"公司",checked:false}],
EconomicData:[{name:"EconomicData_Yes",cn:"经济资料",checked:false}],
CentralBank:[{name:"CentralBank_Yes",cn:"中央银行数据",checked:false}]
};
//遍历数据查找传入name下同名的对象（用来找出用户点击的那个在模拟数据中的对象位置）
varEachList=(name)=>{
letcategory=$scope.category;
for(varkincategory){
for(varjincategory[k]){
if(category[k][j].name==name){
varsameName=category[k][j];
sameName.checked=true;
returnsameName
}
}
}
};
//该方法主要是在页面一开始会接收一个数组给Item，通过遍历这个数组和模拟数据来勾选一开始就为选中状态的标签
letinit=()=>{
letItem=appSettings.filterInfosCategories;
for(vari=0;i<Item.length;i++){
varsameName=EachList(Item[i]);
//因为整个方法会执行两遍，暂未找出原因，所以加入是否重复的判断
if($scope.categories.indexOf(sameName.name)<0){
$scope.categories.push(sameName.name);
}
}
};
init();
//筛选分类数组（用户点击标签后，传入点击的标签名称和是否在选中状态，如果在就将要传出数组中的同名标签名称移除，如果没选中就加入这个要传出的数组中）
$scope.onClick=(filterItem,check)=>{
varsameName=EachList(filterItem);
if(!check){
sameName.checked=true;
$scope.categories.push(filterItem);
}else{
sameName.checked=false;
for(vari=0;i<$scope.categories.length;i++){
if($scope.categories[i]===filterItem){
$scope.categories.splice(i,1);
}
}
}
};
//确认按钮
$scope.infosRef=()=>{
$scope.onCategoryChange();
$scope.modal.hide();
};
//清空
$scope.clean=()=>{
letche=$("input:checked");
//这里不能通过赋值为[]来清除，外面已经被复制引用。
$scope.categories.length=0;
che.each(function(k,filterInput){
filterInput.checked=false;
});
$scope.infosRef();
}
}
以上所述是小编给大家介绍的AngularJs页面筛选标签小功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！