Angularjs过滤深层对象答案

【问题标题】：Anuglar js filter deep objectsAngularjs过滤深层对象
【发布时间】：2018-06-01 18:00:52
【问题描述】：

我陷入了必须使用 ng-repeat 中的过滤器查找数据的情况

情况：

Data 是一个 objects 数组，具有 name 和 status 并且 status 具有属性 a

现在想要过滤具有 status.a 属性的对象为 started 和 in progress

我尝试了多种解决方案

Sol1：

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

返回结果：status.a of In Progress only

溶胶2：

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

返回相同的结果：status.a of In Progress only

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>

    $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

【问题讨论】：

我不认为它可以在 ng-repeat 中完成，除非您跳过过滤器并使用 ng-if，如下所示：
{{ item.name }}
您为什么反对使用自定义过滤器？这是您的情况的完美解决方案。
@Lex 我想使用角度 js 过滤器的强大功能，而不是自定义过滤器
使用自定义过滤器。这是 angularjs 和最佳实践 100% 推荐的。
关注点分离是应用程序开发中的重要内容之一。不要将复杂的业务与以后更难维护的视图混在一起。将您的逻辑保留在控制器中或在应用程序级别创建自定义过滤器。即使您的要求可用，以这种方式实现也不好

标签： angularjs angularjs-filter

【解决方案1】：

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

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

$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 Filter Component Reference - filter

DEMO on PLNKR

【讨论】：