Угловая фильтрация флажка

Question

Я пытаюсь написать собственный фильтр для фильтрации по некоторым флажкам, но havent повезло, Ive нашел здесь решения, но не имеет ничего общего - был бы альтернативный способ написания этой функциональности флажка - иметь I структурировал это это Угловое приложение неправильно?

Я воссоздал свое маленькое угловое приложение в jsfiddle здесь (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; 
}]); 

Answer 1

Вам нужно добавить пару вещей.

Первый магазин тот факт, что флажок установлен в модели:

<input type="checkbox" ng-model="checkbox.selected"/> 

Затем определите filterByCategory для фильтрации:

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; 
     } 
    }; 
}); 

Некоторые объяснения этого фильтра: функция фильтра может принимать n, первый - это фильтр для фильтрации, а следующие (arg1, arg2, ...) - это параметры, которые вы использовали.

array | filterName:arg1:arg2 

Мы хотим, чтобы отфильтровать ListItems с флажками, поэтому я делаю что

Затем вам нужно, чтобы ваш ListController знать флажков:

someApp.controller('listCtrl', ['$scope','checkboxFactory','listFactory','searchFactory', function($scope, checkboxFactory,listFactory, searchFactory) { 
$scope.checkboxes = checkboxFactory; 

И, наконец, использовать ваш фильтр в списке:

<li ng-repeat="item in listItems | filter: search.query | filterByCategory : checkboxes"> 
    {{ item.name }} 
</li> 

Все эти модификации доступны на сценарий: http://jsfiddle.net/vorg019v/2/