Дайте новый класс Нг-класса с переменным значением

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-класс работает с условиями, но возможно ли подобное подобное (чтобы дать имя класса в ng-классе и он принимает его свойства)?

Спасибо и привет.

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'}}">