当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJs页面筛选标签小功能

AngularJs页面筛选标签小功能

2018年05月29日  | 移动技术网IT编程  | 我要评论

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页面筛选标签小功能 ，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网