Question

我是AngularJS的新手，我正在为我的老板整理一个非常基本的概念验证。它是汽车租赁的列表，在视图的主要区域中通过一些外部JSON填充结果列表，并在侧面放置过滤器面板。你可以看到我在这里创建的Plunker：

我已经能够在ngRepeat中成功引用子对象/值：

  <article data-ng-repeat="result in results | filter:search" class="result">
    <h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3>
    <ul class="result-features">
        <li>{{result.carDetails.hireDuration}} day hire</li>
        <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
        <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
        <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
    </ul>
</article>

...但是，到目前为止，我无法访问搜索过滤器中的第二级子对象。所以，例如，在我按'汽车类型'过滤的地方（见下文），我希望能够使用'search.carType.name'作为我的ngModel，尽可能具体 - 但这不是不行，虽然只是使用'search.carType'工作正常。谁能告诉我我做错了什么？

<h4>Car type:</h4>
    Compact <input type="checkbox" data-ng-model="search.carType" ng-true-value="Compact" ng-false-value="" /><br>
    Intermediate <input type="checkbox" data-ng-model="search.carType" ng-true-value="Intermediate" ng-false-value="" /><br>
    Premium <input type="checkbox" data-ng-model="search.carType" ng-true-value="Premium" ng-false-value="" /><br>

Answer 1

您的搜索对象正在正确填充，但过滤器并未以您期望的方式使用它。看一下filter（https://github.com/angular/angular.js/blob/master/src/ng/filter/filter.js）的实现，当它被赋予一个对象作为过滤器定义时，似乎只有一层子属性深。

Ajay的建议可行，但您需要链接其他过滤器以容纳其他参数。您可以更改汽车类型和公司以在ng-model中指定x.name，然后将过滤器更改为filter:search.carType.name|filter:search.company.name。如果你只有少量的参数类型，我会用这种方式处理它。

另一方面，您当前的方法的好处是它是透明的。如果参数数量在其他地方发生变化，则无需更改过滤器调用。如果你可能有相对大量的那些，或者它们是动态的，我会采取更具可扩展性的方法。编写一个使用搜索对象的过滤器FUNCTION，并将子项与过滤后的数据进行比较，深度超过一级。

Answer 2

这是Anton Kropp关于深度对象过滤的一篇不错的文章：FILTER ON DEEP OBJECT PROPERTIES IN ANGULARJS

相关代码：

function initFilters(app){
    app.filter('property', property);
}

function property(){
    function parseString(input){
        return input.split(".");
    }

    function getValue(element, propertyArray){
        var value = element;

        _.forEach(propertyArray, function(property){
            value = value[property];
        });

        return value;
    }

    return function (array, propertyString, target){
        var properties = parseString(propertyString);

        return _.filter(array, function(item){
            return getValue(item, properties) == target;
        });
    }
}

和HTML

<ul>
    only failed: <input type="checkbox"
                  ng-model="onlyFailed"
                  ng-init="onlyFailed=false"/>

    <li ng-repeat="entry in data.entries | property:'test.status.pass':!onlyFailed">
        <test-entry test="entry.test"></test-entry>
    </li>
</ul>

和JSFiddle here

在过滤器中引用范围子项（AngularJS）

2 个答案: