変数の値でNG-クラスによって新しいクラスを与える

Question

こんにちは、私は次のコードを持っている：

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.fieldSize = "cInputLarge"; //Change for the effect to -> cInputMedium, cInputLarge 
 
});

.cDefault { 
 
    width: 50px; 
 
} 
 
.cInputMedium { 
 
    width: 100px; 
 
} 
 
.cInputLarge { 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myController"> 
 
    <input class="cDefault" ng-class="{{fieldSize}}"> 
 
    <br> 
 
    <br>{{fieldSize}} 
 
</div>

私の目標は変更され、入力にクラス名を与えることであり、それの幅。私はng-classがどのように条件で動作するのか知っていますが、これも可能です（ng-classにクラス名をつけてプロパティを取ります）？

ありがとうございます。

Answer 1

に特異的に結合することができます。

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.fieldSize = "cInputLarge"; //Change for the effect to -> cInputMedium, cInputLarge 
 
});

.cDefault { 
 
    width: 50px; 
 
} 
 
.cInputMedium { 
 
    width: 100px; 
 
} 
 
.cInputLarge { 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myController"> 
 
    <input class="cDefault" ng-class="fieldSize"> 
 
    <br> 
 
    <br>{{fieldSize}} 
 
</div>

Answer 2

はい正しいです。 あなただけの変数の名前を使用し、それが十分でなければならない範囲変数

Answer 3

またはこの

<input class="cDefault" ng-class="{{'fieldSize'}}">