Wie Angular Filter auf ng-Wiederholung von Objektattributen bedingt anwenden?

Ich habe ein Objekt mit 100+ Attributen, wie "Name", "Preis", "Ablaufdatum" ... usw. Ich benutze ng-repeat, um alle Schlüsselpaarwerte des Objekts zu durchlaufen und anzuzeigen sie auf einem Tisch.Wie Angular Filter auf ng-Wiederholung von Objektattributen bedingt anwenden?

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

Aber ich will das Eckige Datum-Filter auf bestimmte Attribute verwenden, wie zum Beispiel irgendwelchen Datumsfelder:

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

Und im Idealfall auch andere Filter. Wie kann ich das tun?

Quelle

2016-03-21 Kangze Huang

für Ihr td-Element verwenden 'ng-if = "x.Value Instanceof Date"' als Attribut Vielleicht. Und für jeden Datentyp wiederholen – sniels

Idealerweise würde ich gerne mehrere Filter anwenden –

@sniels Würde 'ng-if' nicht bedeuten, dass' 'Elemente, die auf' FALSE' auswerten, nicht angezeigt werden? Ich möchte immer noch alle meine '' Elemente anzeigen, aber einen Filter auf einige davon anwenden. –

Ich habe versucht, das Problem neu zu erstellen und löste es mit ng-if. Es scheint eine Funktion im Angular Namespace zu sein, um jeden Typ wie Datum, String, Nummer zu überprüfen, den ich in die Ansicht durch den Bereich injiziert habe.
Beachten Sie auch, dass ich die ng-repeat="(key, value) in ..." unter der Annahme verwendet, dass Sie über ein Objekt, source iterieren.

<!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>

Quelle

2016-03-21 17:23:13 sniels

Dies ist keine einfache und elegante Art, es zu tun. Sie können nicht dynamische Filter, so dass Sie Entscheidungen in bevorzugt sind weniger bevorzugte Reihenfolge:

Preformat Datumsfelder dynamisch Controller
Verwendung ngIf/ngShow Schalter
schreiben benutzerdefinierte Filter, die eine andere Filterbasis gelten bei einer Konfiguration. Hier

ist ein Beispiel für den benutzerdefinierten Filteransatz:

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>

Quelle

2016-03-21 15:55:16 dfsq

Wie Angular Filter auf ng-Wiederholung von Objektattributen bedingt anwenden?

Antwort

Verwandte Themen