AngularJS / JavaScript -值应用于数组中的所有JSON
故事：
我创建了一个数组($scope.mainArray)，它将使用如下所示的<table> <tr>来表示：
+---+
| 1 |
+---+
| 2 |
+---+
| 3 |
+---+在每个对象内部都有一个数组，它在<td>中使用ng-repeat表示，如下所示：
+---+-----+-----+-----+
| 1 | 1-1 | 1-2 | 1-3 |
+---+-----+-----+-----+
| 2 | 2-1 | 2-2 | 2-3 |
+---+-----+-----+-----+
| 3 | 3-1 | 3-2 | 3-3 |
+---+-----+-----+-----+每个<td>都是一个布尔变量。如果是true，<td>的背景色将变成绿色。否则，默认背景。
问题：
每当我将1 boolean转换为true时，该专栏中的所有<td>都会变成绿色。代码$scope.mainArray[0].subArray[0].isGreen = true;将单元格1-1转换为绿色，这使得2-1和3-1都变成绿色。
SSCCE:
柱塞： https://plnkr.co/edit/9q3PMO?p=preview
所以片段：
angular.module("App", [])
.controller("Controller", function($scope) {
var initSubArray = function() {
var data = [{
"value": 1,
"label": 1,
"isGreen": false
}, {
"value": 2,
"label": 2,
"isGreen": false
}, {
"value": 3,
"label": 3,
"isGreen": false
}];
return data;
};
var initMainArray = function() {
var data = [{
"value": 1,
"label": 1
}, {
"value": 2,
"label": 2
}, {
"value": 3,
"label": 3
}];
return data;
};
var putSubArray = function() {
var subArray = initSubArray();
for (i = 0; i < $scope.mainArray.length; i++) {
$scope.mainArray[i].subArray = subArray;
}
};
$scope.init = function() {
$scope.mainArray = initMainArray();
putSubArray();
$scope.mainArray[0].subArray[0].isGreen = true;
};
});table {
border-collapse: collapse;
}
td {
border: solid;
}
.green {
background-color: #00FF00;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
</head>
<body ng-app="App" ng-controller="Controller" ng-init="init()">
<table>
<tr ng-repeat="foo in mainArray">
<td>
{{foo.label}}
</td>
<td ng-repeat="bar in foo.subArray" ng-class="{'green' : bar.isGreen}">
{{foo.label}}-{{bar.label}}
</td>
</tr>
</table>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2017-04-10 15:03:09
问题是，您正在引用subArray对象。这意味着，当您从subArray中的一个元素更改mainArray时，原始对象也会被更改。
来自subArray中其他元素的mainArray对象也将被更改。为了避免这种情况，我建议您在angular.copy函数中使用putSubArray：
var putSubArray = function() {
var subArray = initSubArray();
for(i = 0; i < $scope.mainArray.length; i++ ) {
$scope.mainArray[i].subArray = angular.copy(subArray);
}
};我还更新了你的柱塞
您可以看到一个更详细的解释，这里
Stack Overflow用户
发布于 2017-04-10 14:57:39
只需替换下面的函数，查找代码片段即可。另外添加了angular.copy以避免引用。
var putSubArray = function() {
var subArray = initSubArray();
for(i = 0; i < $scope.mainArray.length; i++ ) {
$scope.mainArray[i].subArray = angular.copy(subArray);
}
};Stack Overflow用户
发布于 2017-04-10 14:56:36
问题是您只有一个subArray对象。你也有三份参考资料。当您进行更改时，您正在更改所有行正在使用的subArray。
您可以通过更改以下内容来解决这个问题：
var putSubArray = function() {
var subArray = initSubArray();
for (i = 0; i < $scope.mainArray.length; i++) {
$scope.mainArray[i].subArray = subArray;
}
};至
var putSubArray = function() {
for (i = 0; i < $scope.mainArray.length; i++) {
var subArray = initSubArray();
$scope.mainArray[i].subArray = subArray;
}
};或者是更整洁的变体
https://stackoverflow.com/questions/43326326
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号