web-dev-qa-db-ja.com

Angular.jsの動的クラス

ループしている<li>要素にcssクラスを動的に追加したい。ループは次のとおりです。

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

私のtodoモデルでは、「緊急」、「それほど重要ではない」、または「通常」のプロパティ優先度があり、各要素にクラスを割り当てたいだけです。

ng-class="{'urgent': todo.urgent}"のようなブール値に対してこれを行うことができますが、変数はブール値ではなく、3つの値を持っています。どうすればいいですか？クラスはいくつかの視覚的なものを変更するため、ng-style="..."を使用したくないことにも注意してください。

classdynamicangularjs
49
mpaepper

関数を式として単純に割り当て、そこから適切なクラスを返すことができます。 編集：動的クラスのより良い解決策もあります。以下の注意を参照してください。

ビューからの抜粋：

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

そしてコントローラーで：

$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
    }
}

これを行うより良い方法

私は最近、別のアプローチについて学びました。操作するクラスに対応するプロパティを持つオブジェクトを渡します。値は式またはブール変数です。簡単な例：

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

この場合、user.idが$scopeオブジェクトのactiveと一致する限り、activeIdクラスが要素に追加されます！

86
ŁukaszBachman

クラスを追加するだけの場合は、補間でclass属性を使用します。

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

あなたはほとんどそれを得た:)
補間マークアップなし（{{および}}）：

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