Как мне сделать ngClass реагирующим на членство в массиве в Angular?

Question

Как мне сделать ngClass реагирующим на членство в массиве в Angular?

0

Я пытаюсь создать класс списка, реагирующий на то, является ли этот идентификатор элемента списка в массиве. Я мог бы обработать это с помощью функции контроллера, но это не будет автоматически обновлять класс, если массив изменится.

Вот плункер, представляющий мою проблему, я хочу, чтобы все идентификаторы в $scope.redIds были красными. 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);

Спасибо!

EDIT Plunker обновлен рабочим решением: http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9

JD. 23 авг. 2015, в 22:44

Источник

Теги:

angularjs

arrays

css

ng-class

angularjs-ng-class

1 ответ

Ещё вопросы

Pankaj Parkar · Accepted Answer · 2015-08-23T18-27-00.000Z

В основном у вас есть неправильная директива ng-class, она не должна использовать id in redIds выражение не будет работать, этот вид кода работает только с ng-repeat.

Для получения этой работы вы можете использовать .indexOf здесь, который проверяет, redIds массив redIds содержит элемент id или нет.

наценка

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

Demo Plunkr

отсутствует {} для объекта ng-class
@charlietfl Спасибо за внимание .. Я исправил эту опечатку .. :)