通过 ng-class 给一个新的类，变量值答案

【问题标题】：Give a new class by ng-class with variable value通过 ng-class 给一个新的类，变量值
【发布时间】：2016-11-05 20:52:54
【问题描述】：

您好，我有以下代码：

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 中给出一个类名并采用它的属性）？

感谢和欢呼。

【问题讨论】：

标签： css angularjs ng-class

【解决方案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>

【讨论】：

您好，感谢您的回答，它有效！我会尽快将其标记为正确答案。干杯！

【解决方案2】：

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

【讨论】：

嗨，但是看看我的 sn-p...它仍然是 50px 而不是绑定类的 200px...？
我检查它是宽度：200px;

【解决方案3】：

或者试试这个

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

【讨论】：