[英]Angular Js : Scope Arrays
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控制器
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)
}
我連接兩個數組a
和b
,如果key id
的值相同,我更新值。 但是當我在合並的數組$scope.final array
上更新時,它會更新數組的值。
這里是小提琴JS Fiddle Demo
因為兩個數組都引用同一個對象,所以當對象更新時,兩個數組都將具有更新的值。
將值復制到最終數組以修復它時,可以復制原始對象
$scope.final_array.push(angular.copy(c[i]));
您可以簡化計算邏輯
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.