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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
js实现可爱的气泡特效
Sep 05 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
生成sessionid和随机密码的例子
2006/10/09 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Yii2如何批量添加数据
2016/05/17 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python中时间模块的基本使用教程
2019/05/14 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
物流仓储计划书
2014/01/10 职场文书
学习标兵获奖感言
2014/02/20 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
出生证明公证书
2014/04/09 职场文书
关于教师节的广播稿
2014/09/10 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书