频道导航

AngularJs页面筛选标签小功能

2019-01-05 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJs页面筛选标签小功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

AngularJS 简介

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

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

页面html：

分类

国家地区:

Box" value="RegionsName.name" ng-checked="RegionsName.checked"/> {{RegionsName.cn}}

资本:

Box" value="CapitalsName.name" ng-checked="CapitalsName.checked"/> {{CapitalsName.cn}}

领域:

Box" value="ScopesName.name" ng-checked="ScopesName.checked"/> {{ScopesName.cn}}

经济资料:

Box" value="EconomicData.name" ng-checked="EconomicData.checked"/> {{EconomicData.cn}}

中央银行数据:

Box" value="CentralBank.name" ng-checked="CentralBank.checked"/> {{CentralBank.cn}}

页面构建：

总共分为5个大项，通过ng-repeat生成每个大项下的小分类标签。

需求分析：用户点击每一个筛选标签，将其所选的标签名称加入一个数组中，并将该数组发送到后台供后台程序员筛选。

js代码：

{ 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方法会执行两遍，暂未找出原因，所以加入是否重复的判断 if($scope.categories.indexOf(sameName.name)<0){ $scope.categories.push(sameName.name); } } }; init(); //筛选分类数组（用户点击标签后，传入点击的标签名称和是否在选中状态，如果在就将要传出数组中的同名标签名称移除，如果没选中就加入这个要传出的数组中） $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); } } } }; //确认按钮 $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页面筛选标签小功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/js/46959.html

angularjs 筛选筛选