Как создать фильтр в AngularJS

Как с помощью AngularJS создать подмножество элементов в массиве?

Например; создайте новый массив из "todos", который включает только элементы "done:true".

function fooController ($scope) {

$scope.todos = [
        {text:'foo'        , done:false}, 
        {text:'foobar'     , done:true},
        {text:'foofoo'     , done:false}, 
        {text:'foobar2'    , done:true}
 ]

}

http://docs.angularjs.org/api/ng.filter%3afilter

http://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE=

Смотрите около 10:45 -> конец


angularjs angularjs-filter
person spuder    schedule 06.05.2013    source источник
comment
хорошо, я создаю образец в stackoverflow.com/questions/16394055/.   -  person timactive    schedule 06.05.2013

Ответы (2)


arrow_upward
5
arrow_downward

Просто добавьте фильтр в свой ngRepeat и покажите только то, что хотите:

ng-repeat='todo in todos | filter:done==true'

Скрипт: http://jsfiddle.net/dPWsv/1/

Если вы хотите полностью УДАЛИТЬ элемент из списка, используйте функцию archive в скрипке.

Примечание: начиная с версии 1.1.3 поведение фильтра изменилось. Теперь вы хотите использовать

ng-repeat='todo in todos | filter:{done:true}'

Скрипт: http://jsfiddle.net/UdbVL/1/

person Tim Withers    schedule 06.05.2013
comment
В конце концов я получил это работает. Спасибо за помощь. github.com/spudstud/angular-todo - person spuder; 07.05.2013

arrow_upward
0
arrow_downward

Ok,

обновить переменную только с проверенными данными

ваша модель:

$scope.todos = [
        {text:'foo'        , done:false}, 
        {text:'foobar'     , done:true},
        {text:'foofoo'     , done:false}, 
        {text:'foobar2'    , done:true}
 ]

вы хотите только проверить:

$scope.todoselect = $filter('filter')($scope.todos, {done:true});

при изменении модели вы хотите обновить свою переменную, поэтому используйте часы в контроллере

$scope.$watch('todos', function(newval, oldval){
                        if (oldval != newval)
                        {   
                      $scope.todoselect = $filter('filter')($scope.todos, {done: true});
                            }
                            },true
                        );
  });

Образец: http://plnkr.co/edit/PnABre?p=preview

person timactive    schedule 06.05.2013