角复选框过滤 [英] Angular checkbox filtering
问题描述
我试着写一个自定义过滤器通过一些复选框来过滤，但还没有任何运气，我已经找到了解决方案，在这里，但不，但没有合适的 - 会有写此复选框功能的另一种方式 - 我已结构这款本角应用程序错误??
我重新创建我的小角应用程序中的jsfiddle这里（ http://jsfiddle.net/samstimpson/vorg019v/ ）
VAR someApp = angular.module（'someApp'，[]）;someApp.factory（'searchFactory'，函数（）{
返回{查询：}
}）;someApp.factory（'checkboxFactory'，函数（）{
VAR checkboxFactory = [
{名称：项目1，资料：1}，
{名称：项目2，项目：2}，
{名称：'项目3'项目：3}
];
返回checkboxFactory;
}）;someApp.factory（'listFactory'，函数（）{
VAR listFactory = [
{名称：'列表项01'，资料：1}，
{名称：'列表项02'，项目：2}，
{名称：'列表项03，编号：3}，
{名称：'列表项04'，资料：1}，
{名称：'列表项05'，项目：2}，
{名称：'列表项06项目：3}，
{名称：'列表项07'，资料：1}，
{名称：'列表项08'，项目：2}，
{名称：'列表项09'，编号：3}，
{名称：'列表项10'，资料：1}
];
返回listFactory;
}）;someApp.filter（'filterByCategory'，函数（$过滤器）{
返回功能（listItems中）{
的console.log（listItems中）;
};
}）;someApp.controller（'checkboxCtrl'，['$范围，checkboxFactory'，'searchFactory'，函数（$范围，checkboxFactory，searchFactory）{
$ scope.checkboxes = checkboxFactory;
$ scope.search = searchFactory;
}]）;someApp.controller（'的listctrl'，['$范围，listFactory'，'searchFactory'，函数（$范围，listFactory，searchFactory）{
$ scope.listItems = listFactory;
//console.log(search）;
$ scope.search = searchFactory;
}]）;
您需要添加几件事情。
第一家商店，一个框在模型中选择了一个事实：
＆LT;输入类型=复选框NG模型=checkbox.selected/＆GT;
然后定义您的filterByCategory筛选：
someApp.filter（'filterByCategory'，函数（）{
返回功能（输入，复选框）{
的console.log（输入，复选框）;
VAR RET = [];
对于（输入变种I）{
VAR匹配= FALSE;
对（在复选框变种j）条{
如果（复选框[J] .selected＆放大器;＆安培;复选框[J] .item ==输入[I] .item）{
ret.push（输入[I]）;
}
}
}
如果（ret.length大于0）{
返回RET;
}其他{
返回输入;
}
};
}）;
这个过滤器的几点说明：
过滤函数可以接受n个参数，第一个是过滤阵列及以下（ARG1，ARG2，...）是你使用的参数。
阵列| FILTERNAME：ARG1：ARG2
我们想要过滤的复选框的listItems中，这就是为什么我做了
然后，你需要让你的ListController注意复选框：
someApp.controller（'的listctrl'，['$范围，checkboxFactory'，'listFactory'，'searchFactory'，函数（$范围，checkboxFactory，listFactory，searchFactory）{
$ scope.checkboxes = checkboxFactory;
和最后使用过滤器列表：
＆LT;李NG重复=在listItems中的项目|过滤器：search.query | filterByCategory：复选框＆GT;
{{ 项目名 }}
＆LT; /李＆GT;
所有这些修改都可以在小提琴： http://jsfiddle.net/vorg019v/2/
Im trying to write a custom filter to filter by some checkboxes but havent had any luck, Ive found a solutions here but do not but none fit - would there be a alternative way of writing this checkbox functionality - have I structured this this Angular app incorrectly??
I recreated my little angular app in jsfiddle here (http://jsfiddle.net/samstimpson/vorg019v/):
var someApp = angular.module('someApp', []);
someApp.factory('searchFactory', function(){
return { query: "" }
});
someApp.factory('checkboxFactory', function() {
var checkboxFactory = [
{ name: 'item 1', item: 1 },
{ name: 'item 2', item: 2 },
{ name: 'item 3', item: 3 }
];
return checkboxFactory;
});
someApp.factory('listFactory', function() {
var listFactory = [
{ name: 'list item 01', item: 1 },
{ name: 'list item 02', item: 2 },
{ name: 'list item 03', item: 3 },
{ name: 'list item 04', item: 1 },
{ name: 'list item 05', item: 2 },
{ name: 'list item 06', item: 3 },
{ name: 'list item 07', item: 1 },
{ name: 'list item 08', item: 2 },
{ name: 'list item 09', item: 3 },
{ name: 'list item 10', item: 1 }
];
return listFactory;
});
someApp.filter('filterByCategory', function($filter) {
return function(listItems) {
console.log(listItems);
};
});
someApp.controller('checkboxCtrl', ['$scope','checkboxFactory', 'searchFactory', function($scope, checkboxFactory, searchFactory) {
$scope.checkboxes = checkboxFactory;
$scope.search = searchFactory;
}]);
someApp.controller('listCtrl', ['$scope','listFactory','searchFactory', function($scope, listFactory, searchFactory) {
$scope.listItems = listFactory;
//console.log(search);
$scope.search = searchFactory;
}]);
You need to add a couple of things.
First store the fact that a box is selected in your model :
<input type="checkbox" ng-model="checkbox.selected"/>
Then define your filterByCategory to filter :
someApp.filter('filterByCategory', function() {
return function(input, checkboxes) {
console.log(input, checkboxes);
var ret =[];
for (var i in input){
var match = false;
for (var j in checkboxes){
if (checkboxes[j].selected && checkboxes[j].item == input[i].item){
ret.push(input[i]);
}
}
}
if (ret.length > 0){
return ret;
} else {
return input;
}
};
});
Some explanations about this filter : a filter function can take n arguments, the first one is the array to filter and the following (arg1, arg2, ...) are parameters you used.
array | filterName:arg1:arg2
We want to filter the listItems with the checkboxes, that's why I'm doing that
Then you need to let your ListController be aware of checkboxes :
someApp.controller('listCtrl', ['$scope','checkboxFactory','listFactory','searchFactory', function($scope, checkboxFactory,listFactory, searchFactory) {
$scope.checkboxes = checkboxFactory;
And finally use your filter in the list :
<li ng-repeat="item in listItems | filter: search.query | filterByCategory : checkboxes">
{{ item.name }}
</li>
All these modifications are available on the fiddle : http://jsfiddle.net/vorg019v/2/
这篇关于角复选框过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
