Question

我陷入了必须使用ng-repeat

中的过滤器查找数据的情况

情况：

数据是对象的数组<名称和状态，状态有 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 : ''}

问题：

我可以在没有自定义过滤器的情况下达到预期效果吗？
如果是，而不是没有自定义过滤器的方式？

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

Answer 1

在过滤器表达式中使用函数：

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

JS

{{1}}

有关详细信息，请参阅AngularJS Filter Component Reference - filter

DEMO on PLNKR

Anuglar js过滤深层对象

1 个答案: