Whenever I click on an item in collection A and move it to collection B, any changes made to the Value of Collection B also affect the item in collection A. How can this issue be resolved?
The sum exceeds the limit after multiple clicks.
var app = angular.module("RodoApp", []);
app.controller("RodoController", function ($scope, $http) {
$scope.data_List = [{Value: 100 },
{Value: 200},
{Value: 300},];
$scope.List_Add = [];
$scope.click_Add = function (data) {
if ($scope.List_Add.indexOf(data) == -1) {
$scope.List_Add.push(data);
$scope.Sum = () => $scope.List_Add.reduce((Value, b) => { return Value + b.Value; }, 0); //Calculate SUM
}
}
$scope.click_Update = function (data, newValue) {
data.Value = newValue;
}
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="RodoApp" ng-controller="RodoController">
<table class="table table-hover table-striped">
<tr ng-repeat="data in data_List">
<td ng-click="click_Add(data)">{{ data.Value }}</td>
</tr>
</table>
<hr/>
<table class="table table-hover table-striped">
<tr ng-repeat="data in List_Add">
<td>
<a href="#" ng-show="!show_Update" ng-click="model_Value = data.Value; show_Update = true">{{ data.Value }}</a>
<div ng-show="show_Update">
<input type="text" ng-model="model_Value">
<input type="button" value="Save" ng-click="click_Update(data, model_Value); show_Update = false;">
</div>
</td>
</tr>
<tr>
<td>Sum: {{Sum()}}</td>
</tr>
</table>
</body>For more information, visit CodePen
After numerous clicks on an item in collection B, the total sum continues to increase indefinitely.