參考範圍兒童在過濾器（AngularJS）

我是一個AngularJS新手，併爲我的老闆提出了一個非常基本的概念驗證。它是汽車租賃的清單，通過外部JSON填充視圖的主要區域中的結果列表，以及側面的過濾器面板。你可以看到Plunker我這裏創建：參考範圍兒童在過濾器（AngularJS）

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>

...但是，我到目前爲止我無法訪問我的搜索過濾器中的二級子對象。所以，舉個例子，我用'car type'過濾（見下面），我希望能夠使用'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>

來源

2013-05-10 ParkerDigital

你應該使用過濾器：search.carType.name – 2013-05-10 15:29:27

您的搜索對象正在正確填充，但過濾器沒有以您期望的方式使用它。看看過濾器的實現（https://github.com/angular/angular.js/blob/master/src/ng/filter/filter.js），當它被賦予一個對象作爲過濾器定義時，它似乎只深入一層子屬性。

Ajay的建議可行，但您需要鏈接額外的過濾器以適應您的其他參數。您可以更改車型和公司以在ng模型中指定x.name，然後將篩選器更改爲filter:search.carType.name|filter:search.company.name。如果你只有少量的參數類型，我會這樣處理。

另一方面，你目前的做法的好處是它是透明的。如果參數數目在其他地方改變，則不需要更改過濾器調用。如果你可能有相當多的人，或者如果他們是動態的，我會採取更具可擴展性的方法。編寫一個過濾器功能，消耗搜索對象，深入比較兒童過濾數據深入一級。

來源

2013-05-10 16:14:45

好的，謝謝，有時間鑽研自定義過濾器！ – ParkerDigital 2013-05-13 09:46:46

我認爲你並不需要一個完整的自定義過濾器。你可以使用過濾器Filter的'function'選項（認爲我們正在過度使用這個單詞？）看這裏：http://docs.angularjs.org/api/ng.filter:filter。您不需要改變要過濾的集合，只需爲每個項目輸入true或false，然後篩選器就可以實現該功能。你只需要給它一個比較函數，它使用你的搜索對象來評估每個項目。 – 2013-05-14 02:27:20

這裏是一個不錯的職位由安東·克羅普深對象過濾：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

來源

2014-05-02 12:27:01 Decoy

參考範圍兒童在過濾器（AngularJS）

回答

相關問題