我在显示文本的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)}">