angularjs過濾多個表達式

我是新來angularjs，只是想一些幫助，過濾...angularjs過濾多個表達式

我明白過濾的基礎知識（這是很基本的），但我想要做的是過濾器使用的多個表達式。

HTML：

<body data-ng-init="phones = [{make:'Apple', model:'iPhone5'}, {make:'HTC', model:'One'}, {make:'Samsung', model:'GalaxyS4'}]"> 
    <p>my first angular app</p> 
    <p><label>filter</label><input data-ng-model="phoneFilter.$" type="text"></p> 
    <ul> 
     <li data-ng-repeat="phone in phones | filter:phoneFilter"> 
      {{phone.make}} {{phone.model}} 
     </li> 
    </ul> 
</body>

現在，如果我過濾「蘋果」或「的iphone5」它工作正常，但如果我輸入「蘋果我」我只要一開始輸入模型中的過濾器是空白。

我需要爲此創建一個自定義過濾器嗎？

乾杯

來源

2013-08-01 Adi

至少你不能簡單地使用過濾器filter的基本形式，因爲AngularJS不能單獨猜測空格的意思是「或」。

但是你不需要創建你自己的指令。 AngularJS 1.1.5爲filter提供了第三個參數（請參閱documentation）。它可以採用一個函數，該函數「將給出對象值和謂詞值進行比較，並且如果該項目應該包含在過濾結果中，則返回true」。然後，所有你需要做的是：

$scope.multipleChoicesComparator = function (expected, actualInCompactForm) 
{ 
    // Get a list of predicates 
    var listActual = actualInCompactForm.split(' '); 
    var mustBeIncluded = false; 

    angular.forEach(listActual, function (actual) 
    { 
     // Search for a substring in the object value which match 
     // one of the predicate, in a case-insensitive manner 
     if (angular.lowercase(expected).indexOf(angular.lowercase(actual)) !== -1) 
     { 
      mustBeIncluded = true; 
     } 
    }); 

    return mustBeIncluded; 
};

<li data-ng-repeat="phone in phones | filter:phoneFilter:multipleChoicesComparator"> 
    {{phone.make}} {{phone.model}} 
</li>

Fiddle

來源

2013-08-01 13:06:42 Blackhole

感謝，但只要我輸入「我」在iphone（打字蘋果之後）從過濾的結果消失仍。 – Adi

它不，只是嘗試小提琴。但是'filter'過濾器的第三個參數是在AngularJS 1.1.3中引入的，所以一定要使用至少這個版本。 – Blackhole

angularjs過濾多個表達式

回答

相關問題