角度：使用過濾器和OR運算符管道

Question

有沒有在AngularJS表達式中使用過濾管道和OR管道的方法。例如：

{{ price | currency || "no price set" }} 

這可能嗎？

任何幫助表示讚賞。提前致謝！

Answer 1

雖然不是很可讀的，當使用三元運算符是可能的：

{{ price ? (price | currency) : "no price set" }} 

參見js fiddle

有一個缺點，雖然與上述溶液：如果價格被定義，但等於零（假設您的應用程序中的價格是有效值），您將獲得「沒有設置價格」，因爲零是falsy。 你可以解決由函數angular.isDefined暴露範圍：

$scope.isDefined = angular.isDefined; 

{{isDefined(price) ? (price | currency) : "no price"}} 

但是，所有的一切，這將是清潔的定義自定義過濾器：

app.filter('priceFilter', function ($filter) { 
    return function (input) { 
    return angular.isDefined(input) ? $filter('currency')(input) : 'No price set'; 
    }; 
}); 

{{price | priceFilter}} 

見updated js fiddle

Answer 2

我需要的客人：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'filter' 
}) 
export class FilterPipe implements PipeTransform { 

    transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> { 
    return items.filter(item => { 
     let allBlanks = true; 
     for (let field in conditions) { 
     let itemField = item[field] ? item[field].toLowerCase() : ''; 
     let conditionField = conditions[field] !== undefined ? conditions[field].toLowerCase() : ''; 
     if(conditionField !== '') {allBlanks = false;} 
     if (itemField.indexOf(conditionField) !== -1 && conditionField !== '') { 
      return true; 
     } 
     } 
     return allBlanks; 
    }); 
    } 

}