角度クラスとngのクラス

Question

だから角度で、あなたはこれを行うことができます：widget.widgetIdはあなたがすることもできます。1.

に等しい場合、要素に私のクラスのクラスを提供します

ng-class="{ 'my-class': widget.widgetId == '1'} 

class="col-md-{{widget.size}}" 

要素にcol-md-のクラスを与え、次にwidget.sizeが設定されているものを返します。

しかし、私が2番目の例で行っていることをng-classでやりたいのであればどうしますか？たとえば、次のようになります。

私はさまざまな構文で上記を試しましたが、うまくいかないようです。これはng-classで可能ですか？

Answer 1

ここでは、NG-クラスを使用しての基本的な例である：

HTML：

<button ng-class="getLanguageOptionClass(lan)" ng-repeat="lan in language.available" ng-click="language.current=lan">{{lan}}</button> 

Javascriptを

var I18nController = function($scope){ 
    $scope.language = { 
     current: 'no', 
     available: ['en', 'no', 'sv', 'da', 'fi'] 
    }; 
    $scope.getLanguageOptionClass = function(language){ 
     return ($scope.language.current==language) ? 'btn btn-primary' : 'btn btn-info'; 
    } 
}; 

説明：getLanguageOptionClassがパラメータとしてlanで呼び出されますこれは、クラスとして割り当てられた値を返します。

Working example

Answer 2

ない以上、あなたのhtmlの中に

$scope.getClass= function(widget){ 
    var baseClass = "col-md-"; 
    if(widget.widgetId==='1'){ 
     return baseClass + widget.size; 
    } 
} 

、として働くかどうかが、あなたはあなたのコントローラ内の関数を定義することによって、この使用を達成することができます天気を確認のような、それを使用し、

ng-class="getClass(widget)" 

Answer 3

定義コントローラのクラス名を処理する関数

$scope.getClassName = function(widgetSize){ 
    return 'col-md-' + widgetSize; 
} 

ng-claからこの関数を呼び出します。 SS

ng-class="getClassName(widget.size)"