javascript - ng-repeat ng-class条件的语法

嗨，我正在尝试解析以下html，以便它应用存储在$root.buttonClass='btn-primary'中的css类（例如）

<li ng-controller="controllerCtrl">
   <a ng-class="{'$root.buttonClass':viewingContext=='{{entity}}'}"
      ng-repeat="entity in entities"
      ng-click="setContext(entity)"
     type="">
     <span class="label bg-info pull-right"
           ng-class="{hidden:viewingContext!='{{entity}}', show:viewingContext=='{{entity}}'}">
           viewing</span>
           {{entity}}</a>
</li>

控制器非常简单：

  $scope.setContext = function (entity) {
    console.log('set the context as: ' + entity);
    if (entity == $scope.entities[0]) {
      $scope.$root.buttonClass = 'btn-primary';
      $scope.viewingContext = entity;
    }
    if (entity == $scope.entities[1]) {
      $scope.$root.buttonClass = 'btn-warning';
      $scope.viewingContext = entity;
    }
    if (entity == $scope.entities[2]) {
      $scope.$root.buttonClass = 'btn-danger';
      $scope.viewingContext = entity;
    }
  };

标签中的行可能是问题所在！

<a ng-class="{'$root.buttonClass':viewingContext=='{{entity}}'}"
   ng-repeat="entity in entities"
   ng-click="setContext(entity)"
   type="">

更新：

试图使JS提琴http://jsfiddle.net/gn6b4ng8/2

最佳答案

您不能在对象中使用动态键名。从documentation看来，您正在尝试使用第二种类型的表达式，即对象，但违反了结构“如果表达式的计算结果为对象，则该对象的每个键值对都带有真值值，相应的键用作类名。”该键将原样用作类名。

看起来您想要使用ng-class的第一种类型的表达式是什么：“如果表达式的计算结果为字符串，则该字符串应为一个或多个以空格分隔的类名。”如果相反，您可以执行类似ng-class="$root.buttonClass"的操作。那应该解决您的问题，方法是解析为存储在buttonClass中的类名。您可以在文档中看到使用<p ng-class="style">Using String Syntax</p>的示例

关于javascript - ng-repeat ng-class条件的语法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33572673/