Erste von vielen befreien ng-wenn in Vorlage

ich zu einem api verbunden bin und je nach dem Zustand des Spielers ändern ich den Text, derErste von vielen befreien ng-wenn in Vorlage

div.meta(ng-if='friend.personastate == 6') Looking to play 
div.meta(ng-if='friend.personastate == 5') Looking to trade 
div.meta(ng-if='friend.personastate == 4') Snooze 
div.meta(ng-if='friend.personastate == 3') Away 
div.meta(ng-if='friend.personastate == 2') Busy 
div.meta(ng-if='friend.personastate == 1') Online 
div.meta(ng-if='friend.personastate == 0') Offline

ich für eine Klasse verwenden, um die gleiche Sache zeigt sich auf einem Elternteil div:

ng-class='{grey: friend.personastate == 0, green: friend.personastate == 1, orange:friend.personastate == 2, yellow: friend.personastate == 3, blue:friend.personastate == 4}'

Ist es in Ordnung, es so zu behalten, weil es Schnittstellenlogik ist? Oder sollte ich stattdessen eine Partial machen? Ich denke nicht, dass es der Controller-Job ist, zu entscheiden, welches Farbmaterial sein sollte.

Quelle

2016-05-15 Maxime Roussin-Bélanger

Nun für eine Reihe von ng-wenn, ng-Schalter wurde für diese Situation gemacht. Um die ng-Klasse zu vereinfachen, können Sie das 3. Beispiel in der ausgewählten Antwort hier verwenden: http://stackoverflow.com/questions/7792652/what-ist-the-best-way-to-conditional-apply-a -klasse Ich habe noch nie ng-Klasse gemacht und habe momentan keine Zeit, aber ich denke, der Ausdruck wäre '{grau: 0, grün: 1, orange: 2, gelb: 3, blau: 4} [friend.personastate] ' –

@TahsisClaus Ich glaube du meintest' {0: "grau", 1: "grün", 2: "orange", 3: "gelb", 4: "blau"} [ friend.personastate] ' Richtig? –

Eine einfache Möglichkeit, alle ngIfs loszuwerden, besteht darin, alle Informationen in ein Objekt zu aggregieren, indem ngInit verwendet wird. Diese Aufgabe sieht ungefähr so aus:

var stateInfo = { 
    0: { 
    text: 'Offline', 
    class: 'grey' 
    }, 
    1: { 
    text: 'Online', 
    class: 'green' 
    }, 
    2: { 
    text: 'Busy', 
    class: 'orange' 
    }, 
    // ... 
    // You get the idea 
    // ... 
}

In der Vorlage, die Sie <div class="meta">{{ stateInfo[friend.personastate].text }}</div> verwenden würden, um den Text anzuzeigen und ng-class='stateInfo[friend.personastate].class' die gewünschte Klasse zu setzen.

Ein Vorteil dieses Ansatzes ist die reduzierte Anzahl von Beobachtern.

Quelle

2016-05-15 22:51:48

Kann ich eine Direktive dafür verwenden? –

@ MaximeRoussin-Bélanger Service für die Daten, Richtlinie für den HTML-Code. Injizieren Sie den Dienst in die Direktive und verwenden Sie die Service-APIs in der Verknüpfungsfunktion Ihrer Anweisung. – dewd

Erste von vielen befreien ng-wenn in Vorlage

Antwort

Verwandte Themen