通过 ng-class 给一个新的 class 变量值

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>

我的目标是，给输入一个 class 名称，它会改变它的宽度。我知道 ng-class 如何与条件一起工作，但是这样的事情是否也可能（在 ng-class 中给出 class 名称并采用它的属性）？

感谢和欢呼。

Answer 1

是的，它是正确的。您可以绑定到范围变量

Answer 2

直接用变量名就够了:

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 3

或者试试这个

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

通过 ng-class 给一个新的 class 变量值

Give a new class by ng-class with variable value

css

angularjs

ng-class