分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

AngularJs页面筛选标签小功能

JavaScript   发布时间：2022-04-16  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJs页面筛选标签小功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

AngularJS 简介

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

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

页面html：

title">新闻分类
false">

    国家地区:

    • checked)"> checkbox" value="RegionsName.name" ng-checked="RegionsName.checked"/> {{RegionsName.cn}}

  • 资本:

    • checked)"> checkbox" value="CapitalsName.name" ng-checked="CapitalsName.checked"/> {{CapitalsName.cn}}

  • 领域:

    • checked)"> checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/> {{ScopesName.cn}}

  • 经济资料:

    • checked)"> checkbox" value="EconomicData.name" ng-checked="EconomicData.checked"/> {{EconomicData.cn}}

  • 中央银行数据:

    • checked)"> checkbox" 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;im.length;i++){ var samename=EachList(Item[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 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。

大佬总结

以上是大佬教程为你收集整理的AngularJs页面筛选标签小功能全部内容，希望文章能够帮你解决AngularJs页面筛选标签小功能所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：angularjs筛选
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap