页面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. hdu 1159 Palindrome(回文串) 动态规划

    题意:输入一个字符串,至少插入几个字符可以变成回文串(左右对称的字符串) 分析:f[x][y]代表x与y个字符间至少插入f[x][y]个字符可以变成回文串,可以利用动态规划的思想,求解 状态转化方程: ...

  2. div border-radius画圆

    不要指定border-width属性: <html> <style type="text/css"> div{ border-style: solid; b ...

  3. 394. Coins in a Line

    最后更新 一刷. 用数学方法是看是不是3的倍数. 不用数学方法的话要动态规划. 当前玩家,dp[i]行不行取决于dp[i-1]和dp[i-2],代表下一个玩家能不能赢,另一个玩家能赢的话当前就不能赢: ...

  4. 修改Unity脚本模板的方法合计

    作为一个习惯于偷懒的程序,重复性的无聊内容是最让人无奈的事,就比如我们创建Unity脚本之后,需要手动调整生成的新脚本的格式.编码.内容:如果我们要编写的是编辑器或者服务器端脚本,需要修改的内容就会更 ...

  5. Memcached笔记——(四)应对高并发攻击【转】

    http://snowolf.iteye.com/blog/1677495 近半个月过得很痛苦,主要是产品上线后,引来无数机器用户恶意攻击,不停的刷新产品各个服务入口,制造垃圾数据,消耗资源.他们的最 ...

  6. labview中层叠式顺序结构与平铺式顺序结构有什么不同?

    也就看着不同,平铺式看着直观,但比较占地方,程序复杂了就显得过大.二者可互相转换,从这点也可以看出它们没有本质不同!

  7. 1个小时学会ReactiveCocoa基本使用

    来源:朱凯奇 链接:http://www.jianshu.com/p/5d966074741a 1.ReactiveCocoa简介 ReactiveCocoa(简称为RAC),是由Github开源的一 ...

  8. hdu2047.java递推题

    阿牛的EOF牛肉串 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  9. 卸载AMH 5.0面板的具体办法

    安装AMH 5.0面板只有YES.NO和EXIT,和AMH 4.X的安装.卸载.退出有点不同,那么如何卸载AMH 5.0面板呢? 1.root登录ssh 2.输入如下命令: killall php-f ...

  10. Linux下安装GAMS建模优化工具

    1.下载GAMS wget http://d37drm4t2jghv5.cloudfront.net/distributions/24.5.6/linux/linux_x64_64_sfx.exe 2 ...