如何在ng-repeat對象屬性上有條件地應用Angular過濾器？

我有一個包含100多個屬性的對象，比如「name」，「price」，「expiry date」等...我使用ng-repeat遍歷對象的所有鍵值對並顯示他們在桌子上。如何在ng-repeat對象屬性上有條件地應用Angular過濾器？

<table class="table"> 
    <tr ng-repeat="x in attr_array"> 
     <td><b>{{x.key}}</b></td> 
     <td>{{x.value}}</td> 
    </tr> 
</table>

但我想使用某些屬性，如任何日期字段的角日期過濾器：

{{ x.value | date: 'MMM d, y'}}

，理想等的過濾器了。我怎麼能這樣做呢？

來源

2016-03-21 Kangze Huang

也許用'NG-IF = 「x.value的instanceof日期」'爲您的TD-元素的屬性。並重復每個數據類型 – sniels

理想情況下，我想應用多個過濾器 –

@sniels不會使用'ng-if'意味着''元素評估爲'FALSE'不會顯示？我仍然想要顯示所有我的''元素，但在其中一些元素上應用過濾器。 –

我試圖重新您的問題，並與ng-if解決它。角度名稱空間似乎有一個函數來檢查每個類型，如日期，字符串，數字，我通過範圍注入到視圖中。
另請注意，我使用了ng-repeat="(key, value) in ..."，假設您正在迭代對象source。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body ng-app="app" ng-controller="RootController"> 
 
    <table> 
 
    <tr ng-repeat="(key, value) in attr_array"> 
 
     <td><b>{{key}}</b> 
 
     </td> 
 
     <td> 
 
     <span ng-if="isDate(value)">{{value | date: 'MMM d, y'}}</span> 
 
     <span ng-if="isNumber(value)">{{value | number: 4}}</span> 
 
     <span ng-if="isString(value)">{{value | uppercase}}</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <script> 
 
    angular.module('app', []) 
 
     .controller('RootController', function($scope) { 
 
     $scope.isDate = angular.isDate; 
 
     $scope.isNumber = angular.isNumber; 
 
     $scope.isString = angular.isString; 
 
     $scope.attr_array = { 
 
      date: new Date(), 
 
      str: "hello", 
 
      nm: 50.2 
 
     }; 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-03-21 17:23:13 sniels

這不是簡單而優雅的方法。你不能有動態過濾器，所以你的選擇是對者優先不太優選順序：在控制器

預格式化日期字段動態
使用ngIf/ngShow開關，將應用另一個過濾器底座
編寫自定義過濾器在某些配置上。

這裏是自定義過濾器方法的一個例子：

angular.module('demo', []) 
 

 
.controller('MainCtrl', function($scope) { 
 
    $scope.attr_array = [ 
 
    {key: 'created', value: new Date, filter: ['date', 'MMM d, y']}, 
 
    {key: 'name', value: 'Thomas Mann', filter: 'uppercase'}, 
 
    {key: 'price', value: 1233.45, filter: 'number'}, 
 
    {key: 'description', value: 'Some long string', filter: ['limitTo', 10] } 
 
    ] 
 
}) 
 

 
.filter('transform', function($filter) { 
 
    return function(value, filter) { 
 
    var filterData = [].concat(filter); 
 
    filterData.splice(1, 0, value); 
 
    return $filter(filterData.shift()).apply(this, filterData); 
 
    } 
 
})

<script src="https://code.angularjs.org/1.4.9/angular.js"></script> 
 

 
<table ng-app="demo" ng-controller="MainCtrl" class="table"> 
 
    <tr ng-repeat="x in attr_array"> 
 
    <td><b>{{ x.key }}</b> 
 
    </td> 
 
    <td>{{ x.value | transform:x.filter }}</td> 
 
    </tr> 
 
</table>

來源

2016-03-21 15:55:16 dfsq

如何在ng-repeat對象屬性上有條件地應用Angular過濾器？

回答

相關問題