如何让ngClass在Angular中响应数组成员？

我想做一个列表类反应是否列表成员的ID是否在数组中。我可以用控制器中的函数来处理它，但是如果数组发生变化，它不会自动更新类。如何让ngClass在Angular中响应数组成员？

这里是代表我的问题的蹲跳者，我希望$scope.redIds中的所有ID都是红色。下面 http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9

代码：

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-ngController-production</title> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script src="app.js"></script> 

    <style> 
    .red { 
     background-color: red; 
    } 
    </style> 


</head> 
<body ng-app="controllerExample"> 
    <div ng-controller="controller"> 
    <!-- 1 and 4 should be red --> 
    <div ng-repeat="id in ids"> 

     <span ng-class="id in redIds ? 'red' : ''">ID: {{id}}</span> 
    </div> 
    </div> 
</body> 
</html>

app.js：

(function(angular) { 
angular.module('controllerExample', []) 
    .controller('controller', ['$scope', controller]); 

function controller($scope) { 
    $scope.ids = [1,2,3,4]; 
    $scope.redIds = [1,4]; 
} 
})(window.angular);

谢谢！

编辑 Plunker已经更新了工作液： http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9

来源

2015-08-23 JD.

基本上你有错ng-class指令，它不应该被使用id in redIds表达式将无法正常工作，这种代码只工作与ng-repeat。

为了得到这个工作，你可以在这里使用.indexOf，这将检查redIds数组是否包含id元素或不。

标记

<div ng-repeat="id in ids"> 
    <span ng-class="{'red': redIds.indexOf(id) != -1}">ID: {{id}}</span> 
</div>

Demo Plunkr

来源

2015-08-23 20:34:18

缺少'{}''用于@charlietfl感谢头NG-class'对象 – charlietfl

up..I固定的错字.. :) –

如何让ngClass在Angular中响应数组成员？

回答

相关问题