页面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();}}

  

转载于:https://www.cnblogs.com/weblv/p/5611197.html

angularJs 页面筛选标签小功能相关推荐

  1. 微信小程序实现微信APP上的扫一扫扫码跳到小程序对应的结果页面和签字等功能

    最近做了一个小程序项目,这个小程序是搭配APP端使用的,大概需求是这样的,用户用微信的扫一扫或小程序首页的扫一扫都可以实现对APP上的二维码进行扫码识别,识别成功之后跳到页面进行渲染,然后用户可以对其 ...

  2. 织梦php开发tags功能开发,织梦二次开发模板新建PHP页面支持系统标签

    这篇文章主要为大家详细介绍了织梦二次开发模板新建PHP页面支持系统标签,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 有的时候我们在用织梦系统做二次开发建设织梦 ...

  3. 生成msk文件的用处_Yotta企业云盘“小”功能大用处企业办公好伙伴

    Yotta企业云盘"小"功能大用处企业办公好伙伴 对于传统的数据存储,Yotta企业云盘可以很好的超越传统存储所面临的挑战. 1.支持本地文件多个同时上传:在网盘中,在需要上传文件 ...

  4. h5页面保存img_一文彻底解决HTML5页面中长按保存图片功能

    本文详细介绍了如何在H5中实现长按保存图片的功能. 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个( ...

  5. easyui的datagrid可编辑框小功能实例

    最近写了个小功能,备忘. 功能一实现效果: 1.js代码 /*** 其它费用设置* @return* @author ls* @time 2019.04.15*/ var otherYhbh; var ...

  6. 苹果xr十大隐藏功能_苹果手机有哪些隐藏小功能?【建议收藏】

    大家好,我是:玩机小公举 专注于分享各种玩机技巧.文章纯手动,还配上了精美配图. 花了一天时间写了这篇回答,帮大家整理了iPhone 手机隐藏极深的15个小功能,个个实用. 1.批量删除消息 在[信息 ...

  7. 前端模板-2【vue部分小功能、bug处理】

    前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...

  8. tkinter文本框小功能(6):锚点

    tkinter文本框小功能(6):锚点 引言 添加标识 添加锚点 python层面 Tin层面 结语 引言 锚点之一概念在文本浏览中很常见,那就是在同一页面的文本内容在,添加一个锚点标识符,指向一个确 ...

  9. 谷歌浏览器实验室的小功能

    文章目录 前言 一.进入实验室 二.技巧推荐 1.标签悬浮预览 2.标签分组 3.手机快速浏览 4.阅读模式 5.多线程下载 总结 前言 谷歌浏览器实验室中有着许多正在测试的功能,默认是关闭状态的,需 ...

最新文章

  1. .NET 调用JS:WebBrowser.Document.InvokeScript 方法抛出“指定的转换无效”异常的原因
  2. python-print
  3. 很棒的在线裁图工具jQuery1.4.2 + jquery.bitmapcutter.js + BitmapCutter.Core+的完美配合
  4. P3224-[HNOI2012]永无乡【平衡树,启发式合并】
  5. [JetBrains Rider] 在保存文件时自动更新文件头的方法
  6. 基于centos6.5搭建solr服务器
  7. oracle写转帐的存储过程,Oracle存储过程及块编程基础经典案例
  8. java geoprocessor_ArcGIS GeoEvent Processor for Server 安裝與配置 (僅適用於壓縮安裝包)...
  9. mysql日期教程_MySQL日期函数详解
  10. Lpl and Energy-saving Lamps
  11. 使用脚本下载.ts文件并合并
  12. lol服务器维护2021,lol维护公告最新时间2021什么时候结束 11.11版本5月27日更新内容介绍...
  13. 未转变者服务器bug,未转变者BUG问题解决 | 手游网游页游攻略大全
  14. 【Games101】图形的基础变换 总结
  15. 类型“Window typeof globalThis”上不存在属性“gspZc”
  16. 【动手深度学习-笔记】注意力机制(一)注意力机制框架
  17. html怎么设置毛笔字体,三种实用的毛笔书法字体设计制作教程
  18. lisp倒入excel数据画图_如何将EXCEL中的数据导入CAD2007画图
  19. Saltstack安装部署及实践
  20. AP计算机自学笔记:方法参数

热门文章

  1. 【实战】深度学习构建人脸面部表情识别系统
  2. Typora自定义主题分享 (Mac风、图片立体感...)
  3. 学生管理系统:含注册登录操作
  4. 使用cropper插件实现图片的裁剪和预览
  5. 制作一个简单的chrome插件
  6. input file本地图片预览的方法(兼容IE、Chrome和Firefox)
  7. Mac配置item2高亮颜色
  8. BGP路由器协议排错教程:BGP 路由通告的排错
  9. 如何提取公积金 9 天到账
  10. Get a Model! Model Hijacking Attack Against Machine Learning Models