css - 如何使 ngClass 响应 Angular 中的数组成员资格?

标签 css arrays angularjs ng-class angularjs-ng-class

我试图让列表类对列表成员的 ID 是否在数组中使用react。我可以用 Controller 中的一个函数来处理这个问题,但如果数组发生变化,它不会自动更新类。

这是代表我的问题的一个 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>

应用程序.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

最佳答案

基本上你有错误的 ng-class 指令,它不应该在 redIds 中使用 id 表达式不起作用,这种代码只适用于 ng-重复

为了让它正常工作,您可以在此处使用 .indexOf,这将检查 redIds 数组是否包含 id 元素。

标记

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

Demo Plunkr

关于css - 如何使 ngClass 响应 Angular 中的数组成员资格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32171222/

相关文章:

php - 访客与登录用户的导航菜单 WP 样式

arrays - 如何在 Swift 中打乱数组?

java - 从 Sql 数据库到数组的数据

ios - 在 Swift 3 中将数据保存到 .plist 文件

javascript - AngularJS 重定向闪烁以前的模板

javascript - AngularJs 从数组生成类别

javascript - Angularjs $interval cancel 不起作用,并且 destroy 和 stateChangeSuccess 不起作用

html - 悬停时CSS div滑动

javascript - 如何使用svg g实现可折叠树结构

css - 制作段落文本填充容器