javascript - もう 1 つのクラスを 1 つの値にバインドする ng-class の使用方法

Question

次のように、もう 1 つのクラスを値にバインドします。

ng-class="{first: isTrue, second: isTrue, third: isTrue}"

ng-classこのように一度にバインドできる使用法はありますか? (以下のコードは動作しません)

ng-class="{[first, second, third]: isTrue}"

Answer 1

値が true の場合、一重引用符内のプロパティ名がクラスに直接追加されることがわかります。

ng-class="{'first second third': isTrue}"

動作します。

Answer 2

ディレクティブについて知っておく必要がng-classあるのは、渡す値が、実際には JavaScript であるかのように大まかに評価されるということです。(実際には を使用して$scope.$evalいると思います。) つまり、 で利用可能な関数を呼び出して$scope、クラス ハッシュ オブジェクトを生成できるということです。必要なクラスを取得して間隔を空けて配置するという、あなたが思いついたソリューションは非常に気に入っていますが、要素に適用したいクラスの動的リストがある場合はどうでしょうか? 構文は大まかにJavaScript であるため、実行してオブジェクトを作成することはできません{list.join(' '): isTrue}(JavaScript では有効ではないため)。ただし、できることは、関数を作成し、それをスコープに追加することです。

angular.module('app')
  .controller('MyCtrl', function($scope) {
    $scope.myList = ['first', 'second', 'third'];

    $scope.allOrNoneClasses = function(list, condition) {
      var o = {};
      if (condition) {
        o[list.join(' ')] = true;
      }
      return o;
    };
    $scope.scopeBasedClasses = function(list) {
      var o = {};
      list.forEach(function(class){
        // this applies a class which matches the scope attribute if
        // the attribute evaluates to a truthy value.
        o[class] = $scope.$eval(class);
      });
      return o;
    };
  });

これは、次のように HTML で使用できます。

<div ng-class="allOrNoneClasses(myList, isTrue)" />