动态ng类值

Dynamic ng-class value

本文关键字：类值 ng 动态      更新时间：2023-09-26

我有一个指令与这个标记:

<button type="button" ng-class="{ 'btn-disabled': button.isDisabled }">

可以看到，如果作用域的button.isDisabled为真，则将btn-disabled添加为CSS类。

作用域中还有一个属性button.glyphicon。如果glyphicon是正确的，我想把它的值也加到<button>的类中。

我该怎么做?

可能不是最好的语法，但您可以使用:

data-ng-class="[button.isDisabled ? 'btn-disabled' : '', button.glyphicon]"

您可以为ng-class添加一个函数。

<button type="button" ng-class="getClass()">...

和控制器上的

 $scope.getClass = function(){
       return ($scope.button.isDisabled ? "btn-disabled " : " ") + ($scope.button.glyphicon || "");
   }

通过将此添加为函数，可以减少在模板中内联创建的额外监视，并将逻辑从html中抽象出来。

相关文章：