页面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 页面筛选标签小功能的更多相关文章

  1. ios开发之--仿购物类详情页面数量添加小功能

    话不多说先上图:

  2. javaScript之实战 页面筛选功能

    友情提示:gif图太小,可以ctrl 加 +键 放大  成品如下: 开始搭建 html  和  css html代码如下: <!DOCTYPE html> <html lang=&q ...

  3. 生鲜配送管理系统_升鲜宝V2.0 小标签打印功能【代配送商品打印小标签功能】说明_15382353715

    小标签打印说明 小标签打印可以打印本系统的订单商品数量,也可以把外部的订单商品导入本系统进行打印. 打印本系统中的订单商品操作说明[上篇文章已经讲解相关的操作说明] 打印本系统之外的订单商品明细清单 ...

  4. 生鲜配送管理系统_升鲜宝V2.0 小标签打印功能说明_15382353715

    小标签打印说明 小标签打印可以打印本系统的订单商品数量,也可以把外部的订单商品导入本系统进行打印. 打印本系统中的订单商品操作说明 1.1    界面说明 1.2     查询条件 1.2.1     ...

  5. C#开发微信门户及应用(37)--微信公众号标签管理功能

    微信公众号,仿照企业号的思路,增加了标签管理的功能,对关注的粉丝可以设置标签管理,实现更加方便的分组管理功能.开发者可以使用用户标签管理的相关接口,实现对公众号的标签进行创建.查询.修改.删除等操作, ...

  6. Java实现点击一个Jlabel增加一个Jlabel的小功能

    当界面生成以后,自己想做一个点击一个Jlabel增加一个Jlabel,即类似于QQ的添加好友以后可以及时的加进一个好友.自己做了好久,发现不能及时刷新.在网上查了一下,然后自己研究了一小会.发现需要v ...

  7. Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据

    用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...

  8. Javascript动态调整文章的行距、字体、颜色,及打印页面和关闭窗口功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. MVC5 Entity Framework学习参加排序、筛选和排序功能

    上一篇文章实现Student 基本的实体CRUD操作.本文将展示如何Students Index页添加排序.筛选和分页功能. 以下是排序完成时.经过筛选和分页功能截图,您可以在列标题点击排序. 1.为 ...

随机推荐

  1. books

    <<learning opencv>>,   布拉德斯基 (Bradski.G.) (作者), 克勒 (Kaehler.A.) (作者),   这本书一定要第二版的,因为第二版 ...

  2. Yii framework 应用总结小窍门(转)

    1. Yii Framework] 如何获取当前controller的名称? 下面语句就可以获取当前控制器的名称了! Yii::app()->controller->id 2. yii 如 ...

  3. mysql2redis

    mysql2redis这个项目主要解决mysql数据跟redis数据同步的问题 目前在测试环境研究这方面的应用,以下是git上面的介绍 git入口    git安装入口 Dependencies pl ...

  4. (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

  5. 通过Navicat for MySQL远程连接的时候报错mysql 1130的解决方法

    在用本地的navicat连接服务器的mysql数据库时候出现下面的问题: 解决的方法: 解决方法: 1.改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhos ...

  6. MFC ListControl使用方法

    在原来博客中有:MF CListControl 简单功能使用 推荐文章:MFC类CtrlList用法 今天又又一次来介绍点新东西:双击击listcontrol  做出响应.当然你能够做的还有非常多,比 ...

  7. C的printf与scanf的用法

    之前没学过C语言,只学过C++,所以就来自学下C语言了,其实个人认为C与C++的区别很小,基本上就是printf与scanf这点输出和输入的区别了,如果还有什么区别的话那就是要包含的头文件是不同的.比 ...

  8. Java实现简单版SVM

    Java实现简单版SVM 近期的图像分类工作要用到latent svm,为了更加深入了解svm,自己动手实现一个简单版的.         之所以说是简单版,由于没实用到拉格朗日,对偶,核函数等等.而 ...

  9. 初步掌握HBase

    1.HBase概述 HBase是hadoop生态系统中的重要组成部分,是一个开源的.面向列.适合存储海量非结构化数据或半结构化数据,具备高可靠性.高性能.可灵活扩展伸缩.支持实时数据读写的分布式存储系 ...

  10. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...