AngularJS Repeater, der mehrere Inline-Filter für ein komplexes Modell hat - javascript, angularjs

Ich bin völlig neu bei AngularJS und möchte daher einige Ratschläge dazu erhalten.

Anstatt mehrere klobige "Blöcke" zu erstellenFiltercode, ist es möglich, mehrere Filter in einem Repeater sauber anzuzeigen / auszublenden? Dies würde die Lesbarkeit auf den ersten Blick erheblich verbessern und ist weniger Code im Vergleich zu Custom Filters / Tutorial 9 auf der AngularJS-Site.

Etwas wie:

    <li ng-repeat="phone in phones | filter:(showIf phone.brand == "Nexus") | orderBy:orderProp">
{{phone.name}}
<ul>
<li ng-repeat="price in phone.prices | filter:(showIf price < 100)">${{price}}</li>
</ul>
</li>

Bearbeitet:

Würde das funktionieren und wie verstecke ich die Eltern UL wenn es keine gibt LIs?

<li ng-repeat="phone in phones | filter:{brand: "Nexus"} | orderBy:orderProp">
{{phone.name}}
<ul>
<li ng-repeat="price in phone.prices | filter:{price: < 100}">${{price}}</li>
</ul>
</li>

Antworten:

Siehe die Filter Entwicklerhandbuch in den Angular-Dokumenten. Es ist durchaus möglich.

Ihr erstes Beispiel, showIf phone.brand == "Nexus" wird am besten mit dem eingebauten Filter etwas verwirrend benannt filter.

<li ng-repeat="phone in phones | filter:{brand: "Nexus"}">{{ phone }}</li>

Dein zweites Beispiel ist etwas komplizierter wegen der < Operator, kann aber mit dem gleichen gelöst werden filter-Filter mit einer benutzerdefinierten Komparatorfunktion oder durch Erstellen eines eigenen benutzerdefinierten Filters.

Beispiel Komparatorfunktion:

$scope.lessThan = function(expected, actual) {
return actual < expected;
}

Verwendet wie:

<li ng-repeat="price in phone.prices | filter:{price: 100}:lessThan">{{price}}</li>