如何使用angularjs为ng重复列表创建复选框过滤器
How to create checkbox filter for ng-repeat list using angularjs?
我正在尝试为ng重复列表创建复选框。我面临一些问题。
HTML
<input type="text" ng-model="findname" placeholder="Search Name" />
<ul>
<li class="no-decoration" ng-repeat="tech in technologyArray">
<label>
<input type="checkbox" ng-model="tech.on" />{{tech.u_proffession}}
</label>
{{tech.on}}
</li>
</ul>
<ul>
<li ng-repeat="stu in students | filter:findname | filter:myFunc ">
<strong>Name :{{stu.u_name}}</strong><br />
</li>
</ul>
JS
var ngApp = angular.module('angapp',[]);
ngApp.controller('angCtrl',function($scope,$http){
$scope.myFunc = function(a) {
for(tech in $scope.technologyArray){
var t = $scope.technologyArray[tech];
if(t.on && a.technology.indexOf(t.u_proffession) > -1){
return true;
}
}
};
$scope.technologyArray = [{ u_proffession: "developer", on: false}, {u_proffession:"driver", on:false}];
$http.get("data.php").then(function(response) {
$scope.students= response.data.records
});
});
JSON阵列
{"records":[{"u_name":"adrian","u_mail":"abc@gmail.net","u_proffession":"developer"},{...}]}
1000 Rows
当我删除ng列表| filter:myFunc
中的复选框过滤器时,简单搜索ng-model="findname"
工作正常。但当我把它们都添加到ng-list
中时,student
列表中没有显示任何数据,文本搜索也不起作用。我想同时使用它们。
有人能告诉我哪里错了吗?我可以解决我的问题。如果有人引导我,我将不胜感激。谢谢。
我绝对不喜欢在控制器中设置过滤函数。在这种情况下,我建议编写一个实际的过滤器。
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.technologyArray = [{
u_proffession: "developer",
on: false
}, {
u_proffession: "driver",
on: false
}];
$scope.students = [{
"u_name": "adrian",
"u_mail": "abc@gmail.net",
"u_proffession": "developer"
}, {
"u_name": "adam",
"u_mail": "def@gmail.net",
"u_proffession": "driver"
}, {
"u_name": "alex",
"u_mail": "ghi@gmail.net",
"u_proffession": "developer"
}, {
"u_name": "allen",
"u_mail": "jkl@gmail.net",
"u_proffession": "driver"
}];
})
.filter('customFilter', function() {
return function(input, techs) {
if(!techs || techs.length === 0) return input;
var out = [];
angular.forEach(input, function(item) {
angular.forEach(techs, function(tech) {
if (item.u_proffession === tech.u_proffession) {
out.push(item);
}
});
});
return out;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="findname" placeholder="Search Name">
<ul>
<li ng-repeat="tech in technologyArray">
<label>
<input type="checkbox" ng-model="tech.on">{{tech.u_proffession}}
</label>
</li>
</ul>
<ul>
<li ng-repeat="stu in students | filter:{u_name: findname} | customFilter:(technologyArray|filter:{on:true})">
<strong>Name :{{stu.u_name}}</strong> ({{stu.u_proffession}})
</li>
</ul>
</div>
相关文章:
- 在 d3 中为数据列表创建元素
- 增加新<李>仅由有序列表创建的元素<ol>
- JavaScript-从脚本中的单词列表创建一个html表或网格
- 下拉列表创建订单,不能在每个下拉列表中选择相同的数字
- 我可以为 4 个不同的下拉列表创建一个循环吗?
- 从 Dojo 中的对象列表创建表的最佳方法
- 使用 jQuery 从元素列表创建特定属性的数组
- 从动态创建的单个列表创建嵌套列表
- 如何从节点和链接列表创建 d3 径向树
- XML解析器/从XML节点列表创建一个XML DOM文档
- 使用选项卡从列表创建片段
- 为复选框列表 - 动态响应列表创建一个过滤器搜索框
- 从Scraped Javascript表列表创建DataFrame
- Twitter引导程序下拉列表创建了一个滚动条
- 循环元素's列表创建一个没有jQuery的转盘
- 下拉列表创建基于输入的搜索栏角
- 使用2个下拉列表创建2个并排的表行来比较数据- JSON
- 如何使用html dom为国家列表创建对象数组
- 如何用未知数量的子列表创建递归列表
- 从按钮列表创建可重用的按钮css/jquery