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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
javascript canvas API内容整理
Feb 16 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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的安全
2006/10/09 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
set在python里的含义和用法
2019/06/24 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python脚本第一行如何写
2020/08/30 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
关于有小孩的离婚协议书
2014/10/26 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
电台广播稿范文
2015/08/19 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技