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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php源码的使用方法讲解
2019/09/26 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python操作MongoDB基础知识
2013/11/01 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python常见的pandas用法demo示例
2019/03/16 Python
python实现趣味图片字符化
2019/04/30 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
python 制作本地应用搜索工具
2021/02/27 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
省级青年文明号申报材料
2014/05/23 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python