AngularJs页面筛选标签小功能
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
下面都是为本文介绍angularjs页面筛选标签功能做铺垫的,重点内容请看下面介绍:
页面html:
<div class="bar bar-calm bar-header"> <div class="title">新闻分类</div> <button class="button button-balanced cleanbtn" ng-click="clean()">清空</button> </div> <ion-content class="content" scroll="false"> <ul class="filter-item"> <li> <p>国家地区:</p> <ul> <li ng-repeat="RegionsName in category.Regions" ng-click="onClick(RegionsName.name,RegionsName.checked)"> <input type="checkbox" value="RegionsName.name" ng-checked="RegionsName.checked"/> <span>{{RegionsName.cn}}</span> </li> </ul> </li> <li> <p>资本:</p> <ul> <li ng-repeat="CapitalsName in category.Capitals" ng-click="onClick(CapitalsName.name,CapitalsName.checked)"> <input type="checkbox" value="CapitalsName.name" ng-checked="CapitalsName.checked"/> <span>{{CapitalsName.cn}}</span> </li> </ul> </li> <li> <p>领域:</p> <ul> <li ng-repeat="ScopesName in category.Scopes" ng-click="onClick(ScopesName.name,ScopesName.checked)"> <input type="checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/> <span>{{ScopesName.cn}}</span> </li> </ul> </li> <li> <p>经济资料:</p> <ul> <li ng-repeat="EconomicData in category.EconomicData" ng-click="onClick(EconomicData.name,EconomicData.checked)"> <input type="checkbox" value="EconomicData.name" ng-checked="EconomicData.checked"/> <span>{{EconomicData.cn}}</span> </li> </ul> </li> <li> <p>中央银行数据:</p> <ul> <li ng-repeat="CentralBank in category.CentralBank" ng-click="onClick(CentralBank.name,CentralBank.checked)"> <input type="checkbox" value="CentralBank.name" ng-checked="CentralBank.checked"/> <span>{{CentralBank.cn}}</span> </li> </ul> </li> </ul> <button class="button button-calm confirmbtn" 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下同名的对象(用来找出用户点击的那个在模拟数据中的对象位置) 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<Item.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页面筛选标签小功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
Angular应用tsconfig.json中的lib属性示例解析
这篇文章主要介绍了Angular应用tsconfig.json中的lib属性示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07AngularJS实践之使用NgModelController进行数据绑定
大家都知道AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModel的controller来做双向数据绑定,本文对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友们可以参考借鉴。2016-10-10
最新评论