我试图让列表类对列表成员的 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>
关于css - 如何使 ngClass 响应 Angular 中的数组成员资格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32171222/