[英]Angular Js : Scope Arrays
HTML HTML
<div ng-controller="MyCtrl">
this is 'a' array
<br>
<div ng-repeat ="element in a">
{{element.value}}
</div>
<br>
this is 'b' array
<br>
<div ng-repeat ="element in b">
{{element.value}}
</div>
<br>
this is final array
<br>
<div ng-repeat ="element in final_array">
{{element.value}}
</div>
</div>'
js controller js控制器
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.a = [{
"id": 1,
"value": 10
}, {
"id": 2,
"value": 20
}]
$scope.b = [{
"id": 1,
"value": 20
}, {
"id": 3,
"value": 40
}]
var c = [];
c = $scope.a.concat($scope.b)
console.log(c)
$scope.final_array = [];
for (var i = 0; i < c.length; i++) {
if ($scope.final_array.length == 0) {
$scope.final_array.push(c[i]);
} else {
alert("hi")
for (var j = 0; j < $scope.final_array.length; j++) {
$scope.flag = 0;
if ($scope.final_array[j].id == c[i].id) {
$scope.final_array[j].value = parseFloat($scope.final_array[j].value) + parseFloat(c[i].value);
$scope.flag = 0;
break;
} else {
$scope.flag = 1;
}
}
if ($scope.flag == 1) {
$scope.final_array.push(c[i]);
}
}
}
console.log($scope.a)
console.log($scope.b)
console.log($scope.final_array)
}
I am concatenating two arrays a
& b
and if the value of key id
is the same, I update the value. 我连接两个数组
a
和b
,如果key id
的值相同,我更新值。 but y does it update the value of a array when I am updating on a merged array $scope.final array
. 但是当我在合并的数组
$scope.final array
上更新时,它会更新数组的值。
here is the fiddle JS Fiddle Demo 这里是小提琴JS Fiddle Demo
Because both the arrays refers to the same object, so when the object is updated both arrays will have the updated value. 因为两个数组都引用同一个对象,所以当对象更新时,两个数组都将具有更新的值。
You can make a copy of the original object when you copy the value to the final array to fix it 将值复制到最终数组以修复它时,可以复制原始对象
$scope.final_array.push(angular.copy(c[i]));
You can simplify the calculation logic like 您可以简化计算逻辑
var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) { $scope.a = [{ "id": 1, "value": 10 }, { "id": 2, "value": 20 }] $scope.b = [{ "id": 1, "value": 20 }, { "id": 3, "value": 40 }] var c = $scope.a.concat($scope.b), map = {}; $scope.final_array = []; c.forEach(function(item) { if (!map[item.id]) { map[item.id] = angular.copy(item); $scope.final_array.push(map[item.id]); } else { map[item.id].value += +item.value; } }); })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app"> <div ng-controller="AppController"> <pre>{{a}}</pre> <pre>{{b}}</pre> <pre>{{final_array}}</pre> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.