2

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

http://plnkr.co/lNJNYagMC2rszbSOF95k

我已经能够在我的 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>
4

2 回答 2

3

您的搜索对象已正确填充，但过滤器并未以您期望的方式使用它。查看过滤器的实现（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，并在将子项与过滤后的数据进行比较时深入一层以上。

于 2013-05-10T16:14:45.127 回答
1

这是 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

于 2014-05-02T12:27:01.257 回答