Angular ng-Klasse mit Klasse

Ich habe ähnliche Fragen hier gefunden, aber nicht dies und es ist ein sehr einfacher Anwendungsfall: Verwenden von Klasse und ng-Klasse auf dem gleichen Element.Angular ng-Klasse mit Klasse

Ich habe eine UL mit ng-Wiederholung generiert. Die LI erhalten ein Styling mit einer .item-Klasse und die ausgewählte LI erhält eine .active-Klasse, die dynamisch mit ng-class hinzugefügt wird, wenn es sich um die aktuell ausgewählte LI (Benutzer) handelt.

Wenn ich nur ng-Klasse verwende, funktioniert es. Aber wenn ich eine Standardklasse hinzufügen möchte, tut es das nicht.

Was ist los? Vielen Dank ---

Dies funktioniert und die ausgewählte LI erhält die .active-Klasse.

<li ng-repeat="user in mainList.users" ng-class="{'active':isCurrentUser(user)}">

Dies funktioniert nicht:

<li ng-repeat="user in mainList.users" class="item" ng-class="{'active':isCurrentUser(user)}">

Quelle

2016-03-20 Slopeside Creative

Nun gibt es immer eine Abhilfe: D:

<li ng-repeat="user in mainList.users" ng-class="{'item' : true, 'active': isCurrentUser(user)}"> 
    {{user}} 
</li>

Ich bin nicht sicher, dass Ihr nehme an, diese Zitate zu haben, wenn Ihr die Klassen in ng-Klasse aufrufen, aber wenn man dosent Arbeit überprüfen Sie die anderen. Hoffe das hat geholfen!

Quelle

2016-03-20 19:41:13 amanuel2

'' item ': true' wird dort nicht benötigt .. Ich verstehe nicht, warum Sie denken, dass 'class =" item "' entfernt wird ..? –

Das hat nicht nach der Frage @PankajParkar funktioniert. Ich gebe nur ein Workaround. – amanuel2

es war mein schlechtes, es hat die ganze Zeit funktioniert. Ich habe versucht, die Frage zu löschen, konnte es aber nicht. Das funktioniert auch, also habe ich es akzeptiert. –

ich dich über Klasse und ng-Klasse, um die Klasse erraten würde sind überschrieben werden. Könnten Sie item: true in der ng-Klasse als eine Möglichkeit verwenden, das zu umgehen?

Quelle

2016-03-20 19:41:03 David

Versuchen Sie dies, ich habe getestet und es funktioniert.

<li ng-repeat="user in mainList.users" class="item ng-class:{'active':isCurrentUser(user)}">

Quelle

2016-03-20 19:52:53

Ich würde das nicht funktionieren, könnten Sie Arbeitsbeispiel teilen? –

Ich habe dies getestet, es funktioniert, wenn IsCurrentUser (Benutzer) einen wahren Wert zurückgibt. Überprüfen Sie diese https://jsfiddle.net/ashecret/Lt7aP/2400/ –

Kuddos ein +1 .. –

wenn ich wirklich erinnern, können Sie es wie folgt tun:

<li class="item" ng-repeat="user in mainList.users" ng-class="{'active':isCurrentUser(user)}">

die Klasse annehmen erste zu sein. Es funktioniert, wenn Sie nicht die gleichen Attribute in beiden Klassen haben.

Auch wenn es nicht funktioniert, können Sie versuchen, es so zu tun:

<!-- add the text-error class if wrong is true --> 
<div class="item ng-class:{ 'text-error': wrong };">Stuff Goes Here</div>

Wenn Sie immer noch Probleme haben, empfehle ich Ihnen, dieses Blog zu besuchen: The Many Ways To Use ng-class

genießen!

Quelle

2016-03-20 20:05:17

Angular ng-Klasse mit Klasse

Antwort

Verwandte Themen