Фильтр AngularJS (объект и несколько значений) не работает - PullRequest
Новая
       45

Фильтр AngularJS (объект и несколько значений) не работает

0 голосов
/ 01 октября 2019

Итак, я получил проект, который использует AngularJS с UI-Router, я перебираю json, у которого есть свойство, называемое «состояние», и это то, что я хочу использовать в качестве фильтра, однако я буду использовать «селектор». "где я могу выбрать" Все "или конкретный.

Я новичок в AngularJS. Так что точно не знаю, что не работает, вот код, который у меня пока есть: 

function filterState (installment){
    switch(selectedValue) {
        case 1:
            if(installment.state === 'PAID'){
                return installment;
            }
            break;
        case 2:
            if(installment.state === 'LATE'){
                return installment;
            }
            break;
        case 3:
            if(installment.state === 'PENDING'){
                return installment;
            }
            break;
        default:
            return installment;
    }

Однако фильтр не работает должным образом. Вот как я его называю: 

<div class="row" ng-repeat="installment in vm.clients.installments | filter: filterState">

Не совсем точно, что это за ошибка, когда я фильтрую по значению вручную, например, фильтру: {state:'Оплачено'} Это работает

Ответы [ 3 ]

0 голосов
/ 01 октября 2019

Если вам нужно отфильтровать с помощью опции выбора, то вы можете сделать что-то вроде этого: 

<select name="select" id="select" ng-model="clients.status">
    <option value="PAID">PAID</option>
    <option value="LATE">LATE</option>
    <option value="PENDING">PENDING</option>
    <option value="ALL">ALL</option>
</select>
<div class="row" ng-repeat="installment in clients.installments | filter: filterState">
    {{installment.id}}
</div>

И в контроллере функцию для фильтрации: 

$scope.filterState = function(installment) {
    if ($scope.clients.status === 'ALL') return true;
    return $scope.clients.status === installment.status;
};

Когда опция ALL выбран, он показывает все элементы списка

Проверьте рабочую демонстрацию здесь: DEMO

0 голосов
/ 01 октября 2019

Очевидно, мне нужно было возвращать логическое значение вместо объекта, я пробовал это раньше, но другой моей проблемой было то, что я вызывал функцию напрямую, а не выполнял vm.function (после передачи в контекст) после выполнениячто это сработало.

0 голосов
/ 01 октября 2019

Функция фильтра возвращает функцию итератора. как обратный звонок. Пожалуйста, проверьте ниже пример. 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.criteria = { name: 'Bob'};

  $scope.criteriaMatch = function( criteria ) {
    return function( item ) {
      return item.name === criteria.name;
    };
  };

  $scope.items =[
    { name: 'Bob'},
    { name: 'Alice'}
  ];
});

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

Кредит: анонимный

...