Question

您好，我有以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的目标是，为输入提供一个类名，它改变了它的宽度。我知道ng-class如何处理条件，但是这样也是可能的（在ng-class中给出一个类名并且它具有它的属性）？

谢谢和欢呼。

Answer 1

只需使用变量的名称，就足够了：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

或试试这个

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

通过具有变量值的ng-class给出一个新类

3 个答案: