2015-09-24 7 views
24

各ダイジェストサイクルで評価されるクラス1回のバインドとクラスでngクラスを持つことが可能かどうか疑問に思っています。ng-class one time binding

<div ng-class="{'one_time_binded_class': isMonkey(), 'not_one_time_binded_class': isUnicorn()}"></div> 

私は1時間ng-class="::{...}" で完全NG-クラスをバインドすることができます知っているが、私の必要性はもちろん、特定の表現

を結合し、このことは動作しない1時間にある:

<div ng-class="{'my_static_class': ::isMonkey(), 'my_dynamic_class': isUnicorn()}"></div> 

これを行う方法はありますか?私は次のようである(私が何を言おうとして続いている場合)、これを行うと考えることができ

答えて

38

方法1:

class="some-class {{::expression ? 'my-class' : ''}}" 

方法2:

ng-class="::{'my-class': expression}" 
0

一つの方法...

.blue{ 
    color: blue; 
} 
.underline{ 
    text-decoration: underline; 
} 
.lineThrough{ 
    text-decoration: line-through; 
} 

<div ng-app ng-controller="myCtrl"> 
    <p ng-class="{'blue': isMonkey()}" class="{{isUnicorn() ? dynamicClass: ''}}">My Text</p> 
    <button ng-click="monkey = !monkey">Monkey</button> 
    <button ng-click="unicorn = !unicorn">Unicorn</button> 
    <button ng-click="toggleClass()">Toggle</button> 
</div> 

function myCtrl($scope) { 
    $scope.dynamicClass = "underline"; 
    $scope.monkey = true; 
    $scope.unicorn = true; 
    $scope.isMonkey = function() { 
     return $scope.monkey; 
    } 
    $scope.isUnicorn = function() { 
     return $scope.unicorn; 
    } 
    $scope.toggleClass = function(){ 
     $scope.dynamicClass = $scope.dynamicClass === "underline"? "lineThrough": "underline"; 
    } 
} 

JSFiddle

+0

おかげで私の質問を約1時間結合である

は直接オペアンプの質問に答える、これを正しく行うのですか。 'my_static_class'の式は1回評価され、 'my_dynamic_class'の式は各ダイジェストサイクルで評価されます。クラス名はあまり選ばれていません申し訳ありません... – frlinw

0

時間バインディングの重要な部分は、 '式'が未定義になるまでバインドされないことです。今のところ最良の答えは@ifadeyで、メソッド1は、 'expression'が定義されていないときに空の文字列に評価されます。これは予想される機能の動作に反する。この後半のバインディングのシナリオでは、方法2は同様に役に立たない。

class="some-class {{::expression ? 'one-time-class' : undefined}}" 
ng-class="{ 'my-dynamic-class' : expression2 }" 

以上の技術的に正しいが、醜い:あなたの答えのための

class="some-class {{::expression ? 'one-time-class' : (expression===undefined ? undefined : '')}}"