javascript - 为什么不能在 ng-class 中使用带条件的方法？

Question

我在显示文本的 ng-repeat 上有一个简单的循环。另外，我想要列表中的一项应该是事件(通过使用绿色突出显示)，因为我已经设置了一个变量 等于项目 id 之一的值。

与使用以下语法进行比较时，这确实有效:

<div ng-repeat="item in data" ng-class="{'active': item.id == selectedId">

但是当我尝试合并一个方法时，它只是失败并给出控制台 error .

请查找演示here .

代码如下:

HTML:

<div ng-app="app" ng-controller="test">
  <div ng-repeat="item in data" ng-class="{'active': getSelectedItemActive(item.id)">
    {{item.name}}
  </div>
</div>

JS:

var app = angular.module('app', []);

app.controller('test', function($scope) {
  $scope.data = [{
    'id': 1,
    'name': 'text 1'
  }, {
    'id': 2,
    'name': 'text 2'
  }, {
    'id': 3,
    'name': 'text 3'
  }, {
    'id': 4,
    'name': 'text 4'
  }, {
    'id': 5,
    'name': 'text 5'
  }];

  $scope.selectedId = 3;

  $scope.getSelectedItemActive = function(id){
  return id == $scope.selectedId;
  }
});

CSS:

.active {
  color: green;
}

Answer 1

您忘记关闭模板中的表达式(“}”):

<div ng-repeat="item in data" ng-class="{'active': getSelectedItemActive(item.id)">

应该是

<div ng-repeat="item in data" ng-class="{'active': getSelectedItemActive(item.id)}">

Updated fiddle