AngularJs页面筛选标签小功能

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过

下面都是为本文介绍angularjs页面筛选标签功能做铺垫的，重点内容请看下面介绍：

页面html：

新闻分类
清空




国家地区:



{{RegionsName.cn}}




资本:



{{CapitalsName.cn}}




领域:



{{ScopesName.cn}}




经济资料:



{{EconomicData.cn}}




中央银行数据:



{{CentralBank.cn}}




确认 

页面构建：

总共分为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下同名的对象（用来找出用户点击的那个在模拟数据中的对象位置）
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
}
}
}
};
//该方法主要是在页面一开始会接收一个数组给Item，通过遍历这个数组和模拟数据来勾选一开始就为选中状态的标签
let init=()=>{
let Item=appSettings.filterInfosCategories;
for(var i=0;i{
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);
}
}
}
};
//确认按钮
$scope.infosRef = () => {
$scope.onCategoryChange();
$scope.modal.hide();
};
//清空
$scope.clean=() => {
let che=$("input:checked");
//这里不能通过赋值为[]来清除，外面已经被复制引用。
$scope.categories.length=0;
che.each(function(k,filterInput){
filterInput.checked=false;
});
$scope.infosRef();
}
} 

以上所述是小编给大家介绍的AngularJs页面筛选标签小功能 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对全福编程网网站的支持！