如何使 ngClass 响应 Angular 中的数组成员？

Question

我正在尝试使列表 class 对列表成员的 ID 是否在数组中作出反应。我可以用控制器中的一个函数来处理这个问题，但是如果数组发生变化，它不会自动更新 class。

这是代表我的问题的 plunker，我希望 $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

Answer 1

基本上你有错误的 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

如何使 ngClass 响应 Angular 中的数组成员？

How do I make an ngClass reactive to array membership in Angular?

css

arrays

angularjs

ng-class

angularjs-ng-class