页面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. 采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET

    采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET undefined

  2. Java 字符转码之UTF-8转为GBK/GB2312

    java跟python类似的做法,在java中字符串的编码是java修改过的一种Unicode编码,所以看到java中的字符串,心理要默念这个东西是java修改过的一种Unicode编码的编码. pa ...

  3. cocos2d-x 2.1.4 使用create_project.py脚本创建项目+ant打包项目

    1.创建项目:执行create_project.py脚本,进入Doc界面输入下面的命令: cd D:\cocos2d-x-2.1.4\cocos2d-x-2.1.4\tools\project-cre ...

  4. 如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何解决因为找不到Notepad++的安装路径而导致的不能更新CS-Script的问题.

  5. Zend Framework 2参考Zend\Authentication(摘要式身份验证)

    Zend Framework 2参考Zend\Authentication(摘要式身份验证) 介绍 摘要式身份验证是HTTP身份验证的方法,提高了基本身份验证时提供的方式进行身份验证,而无需在网络上以 ...

  6. 【转】国内较快的maven镜像

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...

  7. Python数据类型转换

    Python数据类型之间的转换 函数 描述 int(x [,base]) 将x转换为一个整数 long(x [,base] ) 将x转换为一个长整数 float(x) 将x转换到一个浮点数 compl ...

  8. JVM经常使用的调优參数

    -Xms512m -Xmx1024m -XX:MaxPermSize=1204m -XX:+UseConcMarkSweepGC -XX:+CMSClassUnloadingEnabled -XX:+ ...

  9. 使用json-lib进行Java和JSON之间的转换【转载】

    1. json-lib是一个java类库,提供将Java对象,包括beans, maps, collections, java arrays and XML等转换成JSON,或者反向转换的功能. 2. ...

  10. strcmp函数和strcpy函数

    (一)strcmp函数 strcmp函数是比較两个字符串的大小,返回比較的结果.一般形式是: i=strcmp(字符串,字符串); 当中,字符串1.字符串2均可为字符串常量或变量:i   是用于存放比 ...