为什么不能在带有条件的ng类中使用方法

Why one cannot use a method in ng-class with condition?

本文关键字:ng 使用方法 有条件 不能 为什么      更新时间:2023-10-24

我在显示文本的ng-repeat上有一个简单的loop。此外,我想要列表中的一个项目,该项目应为活动(通过使用绿色突出显示),因为我已将variable设置为该项目的一个id的值。

当使用以下语法进行比较时,这确实很有效:

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

但当我尝试合并一个方法时,它只是失败了,并给出控制台错误。

请在这里找到演示。

代码如下:

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

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

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

应该是

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

更新的fiddle

ng类中缺少一个结束大括号。

试着用这个,效果很好。

错误消息不言自明-

VM59 angular.js:9101错误:[$parse:syntax]语法错误:令牌"undefined"是意外的,在表达式[{'active':getSelectedItemActive(item.id)]开始于[{'active':getSelectedItemActive(item.id)].

错过"}"

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