Soru Angular.js içinde dinamik sınıf


Bir css sınıfını dinamik olarak eklemek istiyorum. <li> öğe üzerinde döngü yapıyorum. Döngü böyle:

<li ng-repeat="todo in todos" ng-class="{{todo.priority}}">
  <a href="#/todos/{{todo.id}}">{{todo.title}}</a>
  <p>{{todo.description}}</p>
</li>

Benim todo modelimde, "acil", "önemli olmayan" veya "normal" olabilecek özellik önceliğine sahibim ve sadece her öğe için sınıfı atamak istiyorum.

Bunun gibi bir şeyle boolean için yapabileceğimi biliyorum ng-class="{'urgent': todo.urgent}"  Ama değişkenim bir boole değil, üç değere sahip. Bunu nasıl yapardım? Ayrıca kullanmak istemediğime dikkat edin ng-style="..." sınıfım birkaç görsel şeyi değiştireceğinden beri.


44
2018-02-01 10:05


Menşei




Cevaplar:


Bir işlevi yalnızca bir ifade olarak atayabilir ve oradan uygun bir sınıf döndürürsünüz. Düzenleme: dinamik sınıflar için daha iyi bir çözüm var. Lütfen aşağıdaki nota bakınız.

Snippet görünümünden:

<div ng-class="appliedClass(myObj)">...</div>

ve kontrolörde:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

Bunu yapmanın daha iyi yolu

Yakın zamanda başka bir yaklaşımı öğrendim. Çalıştığınız sınıflara karşılık gelen özelliklere sahip bir nesneyi geçirirsiniz ve değerler ifadeler veya boole değişkenleridir. Basit bir örnek:

ng-class="{ active: user.id == activeId }"

Bu durumda active sınıf, öğeye eklendiği sürece user.id maçlar activeId itibaren $scope nesne!


81
2018-02-01 10:30



Rica ederim efendim. - ŁukaszBachman
Daha doğru, ng-class bir nesneyi veya bir dizeyi alır, böylece yapabilirsiniz ng-class=" 'myClass'+item.priority " - ProLoser
zaten ikinci yöntemini kullanıyordum ama daha sonra bir duvara koştum (temelde ikinci yöntem, yerleştirilmesi gereken sınıfın türetilmesi için birden fazla / karmaşık yollara sahip olduğunuzda çok işe yaramıyor .. yani basit bir ifadeden daha fazlasını gerektiren şeyler) .. yöntem 1 üzerinde +1 - abbood
'Başka' seçeneği var mı? Yapmak istemiyorum {active: user.id == activeId} {inactive: user.id! = ActiveId} ... - dipi evil
@ geoidik, bu doğru değil. Orijinal çözüm ng-class="appliedClass(myObj)" dinamik olarak sınıfları oluşturur myObj belirtmek, bildirmek. - ŁukaszBachman


Sadece bir sınıf eklemek istiyorsanız, class enterpolasyon ile öznitelik:

class="priority-is-{{todo.priority}}"

42
2018-02-20 12:10



Bunun herhangi bir dezavantajı olup olmadığını merak ediyorum? Bu yanlış geliyor ama nedenini bilmiyorum. - Hless
ihtiyacın olabilir ng-class muhtemelen IE veya Edge için iyi çalışmak - Erik


Neredeyse anladın :)
Interpolasyon işaretlemesi olmamalıdır ({{ ve }}):

<li ng-repeat="todo in todos" ng-class="todo.priority">
...

8
2017-12-13 15:49