Question

所以在Angular中你可以这样做：

 ng-class="{ 'my-class': widget.widgetId == '1'}

如果widget.widgetId等于1，那么将为元素提供my-class的类。

你也可以这样做：

 class="col-md-{{widget.size}}"

这将为元素提供一个col-md-类，然后返回设置为widget.size的任何内容。

但是如果我想在第二个例子中做我正在做的事情但是使用ng-class怎么办？例如以下内容：

ng-class="{ 'col-md-{{widget.size}}': widget.widgetId == '1'}"

我已经尝试了上面的各种语法，但似乎没有用。这是否可以使用ng-class？

Answer 1

以下是使用ng-class的基本示例：

HTML：

<button ng-class="getLanguageOptionClass(lan)" ng-repeat="lan in language.available" ng-click="language.current=lan">{{lan}}</button>

的Javascript

var I18nController = function($scope){
     $scope.language = {
         current: 'no', 
         available: ['en', 'no', 'sv', 'da', 'fi']
     };
    $scope.getLanguageOptionClass = function(language){
        return ($scope.language.current==language) ? 'btn btn-primary' : 'btn btn-info';
    }
};

描述：使用getLanguageOptionClass作为参数调用lan，该参数返回一个分配为类的值。

Working example

Answer 2

不确定上面是否有效但你可以通过在控制器内定义一个函数来实现这个目的，

$scope.getClass= function(widget){
    var baseClass = "col-md-";
    if(widget.widgetId==='1'){
         return baseClass + widget.size;
    }
}

在你的html中使用它，比如

ng-class="getClass(widget)"

Answer 3

在控制器中定义一个函数以获取类名称

$scope.getClassName = function(widgetSize){
  return 'col-md-' + widgetSize;
}

从ng-class

调用此函数

ng-class="getClassName(widget.size)"

角度等级和ng等级

3 个答案: