AngularJs页面筛选标签小功能


Posted in Javascript onAugust 01, 2016

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页面筛选标签小功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
JS location几个方法小姐
Jul 09 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
Bootstrap Table使用方法详解
Aug 01 #Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 #Javascript
Angular 页面跳转时传参问题
Aug 01 #Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 #Javascript
1秒50万字!js实现关键词匹配
Aug 01 #Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 #Javascript
JS实现数字格式千分位相互转换方法
Aug 01 #Javascript
You might like
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
yii中widget的用法
2014/12/03 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
html读出文本文件内容
2007/01/22 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
如何为vue的项目添加单元测试
2018/12/19 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
浅谈Python单向链表的实现
2015/12/24 Python
numpy基础教程之np.linalg
2019/02/12 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python利用opencv保存、播放视频
2020/11/02 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
控制工程专业个人求职信
2013/09/25 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
公司内部升职自荐信
2015/03/27 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers