Anuglar JS фильтр глубоких объектов - PullRequest
Новая
       6

Anuglar JS фильтр глубоких объектов

0 голосов
/ 01 июня 2018

Я застрял в ситуации, когда мне нужно найти данные с помощью фильтра в ng-repeat

Ситуация:

Данные - это массив объектов с name и status , а status имеет свойство a

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

Я пробовал множественное решение

Sol1 : 

ng-repeat="item in items | filter: {status :{a:'Not Started'},status: {a:'In Progress'}}

возвращает результат: status.a только в прогрессе

Sol2: 

<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">
    {{ item.name }}
</p>

возвращает тот же результат: status.a только в прогрессе

html 

<div ng-controller="mainCtrl">
    <h1>List 1</h1>
    <ul>
            <li class="clearfix">
              <label>
                 <input ng-model="tracks.ns"
                        ng-true-value="'Not Started'"
                        ng-false-value="''" 
                        type="checkbox">
                 Not started 
              </label>
            </li>
            <li class="clearfix">
              <label> <input ng-model="tracks.ip" ng-true-value="'In Progress'" ng-false-value="''" type="checkbox">In-progress </label>
            </li>
            <li class="clearfix">
              <label> <input ng-model="tracks.do" ng-true-value="'Done'" ng-false-value="''" type="checkbox">Done </label>
            </li>
    </ul>
    {{tracks.ns}}
    <p ng-repeat="item in filteredItems">{{ item.name }}</p>
    <h1>List 2</h1>
    <p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">{{ item.name }}</p>
</div>

js 

    $scope.items = [{
    name: "Alvi",
    status: {
        a: 'Not Started'
    }
}, {
    name: "Krane",
    status: {
        a: 'Done'
    }
}, {
    name: "Tate",
    status: {
        a: 'In Progress'
    }
}, {
    name: "Lorus",
    status: {
        a: 'In Progress'
    }
}];
    $scope.tracks = {ns: '',ip: '',done : ''}

Вопросы:

  1. Можно ли достичь желаемого результата без специального фильтра?

  2. Если да, то как без специального фильтра?

plunker: http://plnkr.co/edit/njsoPu1LHLmNmEx6lCew?p=preview

1 Ответ

0 голосов
/ 02 июня 2018

Используйте функцию в выражении фильтра: 

<p ng-repeat="item in items | filter : customFn">
            {{ item.name }} {{ item.status }}
</p>

JS 

$scope.customFn = function(value, index, array) {
    console.log(value, index, array);
    if (!value) return true;
    if (value.status.a == 'Not Started') return true;
    if (value.status.a == 'In Progress') return true;
    //else
    return false;
}

Для получения дополнительной информации см. Справочник по компонентам фильтра AngularJS - фильтр

DEMO на PLNKR

...