AngularJS ng-Klasse prüfen, ob geschachtelte Schlüssel/Wert-Paar existiert und dann als Klasse

Wert hinzufügen Also habe ich dieses verschachtelte Array, die ich nicht ändern kann die Struktur von. Ich möchte prüfen, ob ein Schlüssel/Wert-Paar existiert, und wenn dies der Fall ist, füge dem betreffenden Element eine entsprechende Klasse hinzu.AngularJS ng-Klasse prüfen, ob geschachtelte Schlüssel/Wert-Paar existiert und dann als Klasse

Ich habe versucht, eine Variation des Ausdrucks zu verwenden:

ng-class="{ 'active' : data.indexOf('"name":"john"') >= 0 }"

jedoch mein Ausdruck ein wenig komplizierter ist und ich fürchte, es ist zu viel einfach so zu verwenden. Es gibt auch das Problem, mehr als zwei Ebenen verschachtelte Anführungszeichen zu verwenden.

Hier ist eine Geige ein Array mit einer ähnlichen Struktur mit dem, was ich arbeite mit:

http://jsfiddle.net/5tvmL2Lg/2/

HTML:

<body ng-app="myModule"> 
<div ng-controller="myController"> 
    <div ng-repeat="hero in heroes"> 
    <div ng-class="{ 'weight-\'hero.stats.indexOf('\'type\':\'weight\'').value\'' : hero.stats.indexOf('\'type\':\'weight\'') >= 0 }"> 
      hello 
    </div> 
    </div> 
</div> 
</body>

JS:

var myModule = angular.module('myModule', []); 

myModule.controller('myController', ['$scope', function($scope) { 

    $scope.heroes = [{ 
     "firstname" : "clark", 
     "lastname" : "kent", 
     "stats" : [ 
     { 
     "type" : "height", 
     "value" : "6'2" 
     }, 
     { 
     "type" : "weight", 
     "value" : 220 
     }, 
     { 
     "type" : "hair", 
     "value" : "brown" 
     } 
     ]}, 
     { 
     "firstname" : "bruce", 
     "lastname" : "wayne", 
     "stats" : [ 
     { 
     "type" : "height", 
     "value" : "6'1" 
     }, 
     { 
     "type" : "hair", 
     "value" : "black" 
     } 
     ]}, 
     { 
     "firstname" : "peter", 
     "lastname" : "parker", 
     "stats" : [ 
     { 
     "type" : "height", 
     "value" : "5'11" 
     }, 
     { 
     "type" : "weight", 
     "value" : 180 
     }, 
     { 
     "type" : "hair", 
     "value" : "auburn" 
     } 
     ]}]; 

}]);

In Am Ende wäre das Ziel, eine Klasse hinzuzufügen, die beispielsweise "Gewicht-220" für "c Lark Kent "div, keine Klasse für die" Bruce Wayne "div, und" Gewicht-180 "für die Peter Parker div.

Ich weiß, dass mein Problem gewunden ist aber jede Hilfe wäre sehr dankbar ... :)

Quelle

2016-08-04 jeanmarc

Sie müssen nicht den gesamten Code-Logik in Ihrer ng-class hinzuzufügen. Sie können es komplizierter machen (für die tief verschachtelten Objekten zu überprüfen) durch eine Funktion, die einen String zurückgibt:

<div ng-repeat="hero in heroes"> 
    <div ng-class="ClassBuilder(hero)"> 
     hello 
    </div> 
</div>

In Ihrem Controller, fügen Sie diese Funktion:

$scope.ClassBuilder = function(hero) { 
    for (var i = 0; i < hero.stats.length; i++) { 
     if (hero.stats[i].type == "weight") { 
      return "weight-" + hero.stats[i].value; 
     } 
    } 
}

Dies wird erhalten Das hero Objekt von jedem ng-repeat und prüfen, ob der weight Typ existiert. Wenn dies der Fall ist, verwendet es die entsprechende value, um eine Zeichenfolge in dem von Ihnen gewünschten Format zurückzugeben, zum Beispiel: "weight-220". Andernfalls wird nichts zurückgegeben und es wird keine Klasse auf diese <div> angewendet.

Quelle

2016-08-04 22:43:28

Nun, vielen Dank Dr. Cool, das macht genau das, was ich vorhabe, und es ist eigentlich einfacher als ich dachte ... Ich fühle mich jetzt dumm, aber trotzdem vielen Dank für deine Hilfe! – jeanmarc

BTW darf ich Sie fragen, was die Gewichtsvariable tut? – jeanmarc

Oh, oops ... Ich wollte das machen: '' return 'weight-' + weight'', vergaß aber das und gab einfach den Wert selbst zurück. Sie können die Zeile '' weight = '' entfernen. –

AngularJS ng-Klasse prüfen, ob geschachtelte Schlüssel/Wert-Paar existiert und dann als Klasse

Antwort

Verwandte Themen