Winkelprüfung für eine oder mehrere ng-if-Anweisungen ist true

Question

Ich habe eine Situation, in der ich eine dynamische Tabelle erstellen, in der Zellen ein Datenaggregat mit mehreren ng-if-Anweisungen enthalten. Grundsätzlich muss ich wissen, ob keine der if-Anweisungen wahr ist, also kann ich einen anderen ng-if tun.

Dies ist ein vereinfachtes Beispiel für das, was ich mache. Es gibt ungefähr 20 Spalten mit unterschiedlichen aggregierten Ergebnissen.

<table> 
    <tr ng-repeat="record in data"> 
     <td> 
      <span ng-if="record.some_number > 0 && record.type == 'SomeType'">{{data1}}</span> 
      <span ng-if="record.age >= 20 && record.age <= 50 && record.gender == 'MALE'">{{data2}}</span> 
      <span ng-if="(record.age <= 20 || record.age >= 50) && record.gender == 'FEMALE'">{{data3}}</span> 
      <span ng-if="!(record.some_number > 0 && record.type == 'SomeType') && !(record.age >= 20 && record.age <= 50 && record.gender == 'MALE') && !((record.age <= 20 || record.age <= 50) && record.gender == 'FEMALE')">{{data4}}</span> 
     </td> 
    </tr> 
<table> 

ich einen ng-Schalter nicht, weil die Bedingungen ganz andere sind verwenden können. Dies ist eine Zusammenfassung von Daten, nicht wenn/sonst. Ich bevorzuge eine andere Herangehensweise als einfach ein '!' zu jeder Bedingung in einem anderen Bereich, weil einige meiner Aggregate viele Bedingungen enthalten und einige der if-Anweisungen nicht trivial sind. Es gibt auch viele Aggregatzellen, so dass die Wartung der allzu komplizierten "anderen" Bedingungen ein Albtraum wäre.

Idealerweise würde ich gerne nur in der Lage sein, eine einzige Variable True auf jede ng-if-Anweisung zuzuweisen, die wahr ist. Irgendwelche Gedanken?

Answer 1

Ich weiß nicht, dass es eine Best Practice ist, aber ich glaube, Sie sollten Ihre ganze Logik in Ihrem JS haben, und der HTML sollte nur eine Vorlage sein, die den Zustand des angezeigten Bereichs widerspiegelt.

Auf diese Weise würden Ihre Bedingungen IMMER in Ihrem JS überprüft werden.

UPDATE: auf der Grundlage neuer Inhalt:

So haben Sie Daten und wie es aussieht, was Sie brauchen, sie zu verarbeiten zuerst, sonst Ihre App-Leistung wird mit einer Überlastung der Beobachter leiden.

Erstens: vereinfachen Sie Ihre HTML, all die Logik wie record.some_number > 0 && record.type == 'SomeType'" gehört in die JS.

<table> 
    <tr ng-repeat="record in data"> 
     <td> 
      <span ng-repeat="item in record.dataToShow" ng-bind-html='item'></span> // now you just repeat the data that has been processed 
     </td> 
    </tr> 
</table> 

Zweitens: Machen Sie die Verarbeitung in Ihrem JavaScript in einer Schleife.

$scope.data = [ some array with lots of stuff ]; 

for(var idx in $scope.data){ 
    var record = $scope.data[ idx ]; // assuming JSON object 
    var dataToShow = []; // store your data(s) in an array 

    // if a condition is met, push your data onto the array 
    if(record.some_number > 0 && record.type == 'SomeType'){ 
     dataToShow.push(data1); 
    } 
    if(record.age >= 20 && record.age <= 50 && record.gender == 'MALE'){ 
     dataToShow.push(data2); 
    } 
    // continue processing conditions 

    if(dataToShow.length === 0){ // none have been true if array is empty 
     // do something 
    } 
    record.dataToShow = dataToShow; 
} 

https://plnkr.co/edit/ZPbui4rLwGGVVD4B90b9?p=preview

Answer 2

eine Scope-Funktion Erhalten Sie zu entscheiden, wie ng-wenn für verschiedene Bedingungen zu behandeln.

<span ng-if="showHideCell(this)">{{data1}}</span> 
<span ng-if="showHideCell(this)">{{data2}}</span> 

Und in Ihrem Controller ..

$scope.showHideCell = function(ele) { 

    //Your complex condition here 

    return decition; // true or false 
} 

---

Wird der Antrag auf Durchsatz kritisch und viele Kontrollen hat, würde ich vorschlagen SoluableNonagon Methode in seiner Antwort mit. Dort würde jeder Verdauungszyklus nur nach einer Variablen suchen.

Answer 3

Sie könnten interessiert sein an https://github.com/zachsnow/ng-elif, die eine ziemlich gute if-elseif-else Erweiterung zu Angulars ng-if ist.

Answer 4

Sie könnten eine generische Methode in Ihrem Controller verwenden, um nach Ihren Bedingungen für Elemente zu suchen, während Sie eine andere haben können, die für alle gilt und im Wesentlichen die oben erwähnte generische Methode aufruft.

Here ist ein Plunk etwas zu tun, was Sie erreichen möchten, könnte Ihnen eine Idee geben.

Was ich hier mache, ist, zum Beispiel zwei Arrays zu haben, eins mit ungeraden Werten und eins mit geraden Werten. Ich habe eine Methode condition auf dem Controller, der einen Wert (erhält den Wert des Arrays von ng-repeat Schleife) und eine all-Methode, die die condition ruft.

$scope.condition = function(element, value) { 
    // Just returns true for even values 

    if (typeof value === "number") 
     return value % 2 == 0; 
    else if (value instanceof Array) { 
     return value.every(function(item) { 
     return item % 2 == 0; 
     }); 
    } 

    } 

    $scope.all = function(element, value) { 
    return $scope.condition(element, value); 
    } 

Sie können an einem ähnlichen Ansatz arbeiten.