gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:56:05 25 4
gpt4 key购买 nike

我试图让列表类对列表成员的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com