Hallo Ich habe ein Objekt mit einer Liste innerhalb Ich möchte in meinem html mit einer ng-Wiederholung Schleife. Die Liste ist Schlüsselwert und der Wert ist wahr oder falsch. In meinem HTML habe ich ein div mit einer Klasse und einer eigenen Hintergrundfarbe. Wenn ich also die ng-Wiederholung mache, würde ich gerne prüfen, ob der Wert in der Liste falsch ist und eine neue Klasse mit einer neuen Hintergrundfarbe hinzufügen. Ich habe für diese ng-Klasse einen Ausdruck benutzt, aber es funktioniert nicht. Das ist mein Ziel:Hinzufügen ng-Klasse mit Ausdruck false

$scope.list = [ 
    { 
     "Name" : "Jacob", 
     "Properties" : { 
       "P1": true, 
       "P2": true, 
       "P3": false 
     } 
    }, 
    { 
     "Name" : "James", 
     "Properties" : { 
       "P1" : false, 
       "P2" : true, 
       "P3" : true 
     } 
    }, 
    { 
     "Name" : "Hector", 
     "Properties" : { 
       "P1" : false, 
       "P2" : false, 
       "P3" : true 
     } 
    } 
]

Dann habe ich folgen html:

<div ng-repeat="item in list"> 
    <div class="myContainer"> 
     <div class="cMyBox cColor1" ng-class="{cWhite: !item.Properties.P1}"></div> 
     <div class="cMyBox cColor2" ng-class="{cWhite: !item.Properties.P2}"></div> 
     <div class="cMyBox cColor3" ng-class="{cWhite: !item.Properties.P3}"></div> 
    </div> 
</div>

Und das ist mein CSS:

.myContainer {display: flex; flex-direction: row;} 
.cMyBox {width: 20px; height: 20px; background-color: blue;} 
.cWhite{background-color: white;} 
.cColor1 {background-color: red;} 
.cColor2 {background-color: blue;} 
.cColor3 {background-color: green;}

Und in dem Moment es does'nt die Farbe ändern, wenn es ist falsch. Ich habe es auch mit ng-class="{cWhite: item.Properties.P1 == false}" versucht.

Ich habe diesen Weg verwendet, um eine Klasse mit ng-Klasse + Ausdruck ein paar Mal hinzuzufügen, aber jetzt funktioniert es nicht. Vielleicht ist meine Wiederholung oder meine Liste falsch.

Danke!

Quelle

2016-05-19 MrBuggy

Das ist das Problem mit der Reihenfolge, in der die CSS-Klasse definiert. Setzen Sie Ihre .cWhite {background-color: white;} auf den letzten. Da cWhite und cColor1, cColor2, cColor3 sich auf derselben Scope-Ebene befinden, wird der Browser den ersten verwenden und den Rest des Hintergrundfarbenwerts belassen. Ich glaube, das Ihr Problem lösen sollte

.myContainer {display: flex; flex-direction: row;} 
.cMyBox {width: 20px; height: 20px; background-color: blue;} 
.cColor1 {background-color: red;} 
.cColor2 {background-color: blue;} 
.cColor3 {background-color: green;} 
.cWhite{background-color: white;}

Quelle

2016-05-19 10:27:57

Hallo und danke für deine Antwort! In meinem ursprünglichen Code ist das Komma nach dem Namen, es war nur ein Tippfehler hier, als ich diese Frage schrieb! Auch mit dem Komma funktioniert es nicht richtig ... – MrBuggy

@MrBuggy möglicherweise fehlen einige Dateien, die nicht geladen sind. Ich habe versucht, deinen Code zu verwenden. Es hat perfekt funktioniert. Ich denke, du musst es noch einmal versuchen. –

Hallo ich habe den Fehler: In meinem Originalcode habe ich hier einen Unterschied gemacht: Ich habe in jedem div "cMyBox" einen Styleattr mit einer anderen rgb-Farbe direkt in das Tag eingefügt. Wenn ich es für jede der drei Divs in einer Klasse entferne, funktioniert es. Wenn ich es direkt im Tag mache, hat es noch niemanden eine Idee warum. Danke – MrBuggy

Ihr Bereichsobjekt ist ungültig. Sie vermissten wenige , nach Name Wert.

// the main (app) module 
 
var myApp = angular.module("myApp", []); 
 

 
// add a controller 
 
myApp.controller("myCtrl", function($scope) { 
 
    $scope.list = [{ 
 
    "Name": "Jacob", 
 
    "Properties": { 
 
     "P1": true, 
 
     "P2": true, 
 
     "P3": false 
 
    } 
 
    }, { 
 
    "Name": "James", 
 
    "Properties": { 
 
     "P1": false, 
 
     "P2": true, 
 
     "P3": true 
 
    } 
 
    }, { 
 
    "Name": "Hector", 
 
    "Properties": { 
 
     "P1": false, 
 
     "P2": false, 
 
     "P3": true 
 
    } 
 
    }]; 
 

 
});

.myContainer { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.cMyBox { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: blue; 
 
} 
 
.cWhite { 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="item in list"> 
 
    <div class="myContainer"> 
 
     <div class="cMyBox" ng-class="{cWhite: !item.Properties.P1}"></div> 
 
     <div class="cMyBox" ng-class="{cWhite: !item.Properties.P2}"></div> 
 
     <div class="cMyBox" ng-class="{cWhite: !item.Properties.P3}"></div> 
 
    </div> 
 
    </div> 
 

 
</body>

Quelle

2016-05-19 10:21:20

Hallo und vielen Dank für Ihre Antwort! In meinem ursprünglichen Code ist das Komma nach dem Namen, es war nur ein Tippfehler hier, als ich diese Frage schrieb! Auch mit dem Komma funktioniert es nicht richtig ... – MrBuggy

@MrBuggy Wenn Sie dieses Snippet ausführen, gibt es weiße und blaue Quadrate. –

Ja, aber versuch es mit drei verschiedenen Farben für die cMyBox div (Hintergrundfarbe direkt im Tag oder mit einer eigenen Klasse einstellen) ... – MrBuggy

Ihre $ scope.list json nicht gut ausgebildet ist, "" fehlt

Correct Json angebracht ist unten:

$scope.list = [ 
         { 
          "Name" : "Jacob", 
          "Properties" : { 
            "P1": true, 
            "P2": true, 
            "P3": false 
          } 
         }, 
         { 
          "Name" : "James", 
          "Properties" : { 
            "P1" : false, 
            "P2" : true, 
            "P3" : true 
          } 
         }, 
         { 
          "Name" : "Hector", 
          "Properties" : { 
            "P1" : false, 
            "P2" : false, 
            "P3" : true 
          } 
         } 
        ]

Es sollte funktionieren gut jetzt.

Quelle

2016-05-19 10:30:39

<div class="cMyBox cColor1" ng-class="{cWhite: !item.Properties.P1}"></div>

cwhite muss Zeichenfolge und geschrieben sein, wie folgend

ng-class="{'cWhite': !item.Properties.P1}"

statt

ng-class="{cWhite: !item.Properties.P1}"

Edit:

CSS

CSS fügen folgende Zeile

.cWhite{background-color: white!important;}

Quelle

2016-05-19 11:15:38

Hi - ich habe es gerade probiert, es klappt auch nicht ... – MrBuggy

Ich fand die Lösung: Ich habe die Klassen cColor1, cColor2 und cColor3 mit drei verschiedenen Hintergrundfarben. Ich habe diese Klassen zum Klassenattribut meines div hinzugefügt und versucht, es mit einem ng-Klasse-Ausdruck in weiß zu ändern, wenn eine Eigenschaft in meiner Liste falsch ist. Das funktioniert also nicht. Nachdem ich die Klassen cColor1, cColor2 und cColor3 aus meiner Klasse attribut im div entfernt und in den Ausdruck ng-class eingefügt habe.

So fügt es die weiße Farbe hinzu, wenn sie falsch ist und wenn es wahr ist, fügt sie die spezifische Farbe mit der spezifischen Klasse für diese Farbe hinzu. Das war meine Lösung.

// the main (app) module 
 
var myApp = angular.module("myApp", []); 
 

 
// add a controller 
 
myApp.controller("myCtrl", function($scope) { 
 
    $scope.list = [{ 
 
    "Name": "Jacob", 
 
    "Properties": { 
 
     "P1": true, 
 
     "P2": true, 
 
     "P3": false 
 
    } 
 
    }, { 
 
    "Name": "James", 
 
    "Properties": { 
 
     "P1": false, 
 
     "P2": true, 
 
     "P3": true 
 
    } 
 
    }, { 
 
    "Name": "Hector", 
 
    "Properties": { 
 
     "P1": false, 
 
     "P2": false, 
 
     "P3": true 
 
    } 
 
    }]; 
 

 
});

.myContainer { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.cMyBox { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.cWhite { 
 
    background-color: white; 
 
} 
 
.cColor1 { 
 
    background-color: blue; 
 
} 
 
.cColor2 { 
 
    background-color: red; 
 
} 
 
.cColor3 { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="item in list"> 
 
    <div class="myContainer"> 
 
     <div class="cMyBox" ng-class="{cWhite: !item.Properties.P1, cColor1: item.Properties.P1}"></div> 
 
     <div class="cMyBox" ng-class="{cWhite: !item.Properties.P2, cColor2: item.Properties.P2}"></div> 
 
     <div class="cMyBox" ng-class="{cWhite: !item.Properties.P3, cColor3: item.Properties.P3}"></div> 
 
    </div> 
 
    </div> 
 

 
</body>

Dank

Quelle

2016-05-19 11:19:20 MrBuggy

Hinzufügen ng-Klasse mit Ausdruck false

Antwort

Edit:

CSS

Verwandte Themen