Зачем нужна угловая сфера?

Question

JS

angular.module('bindExample', []).controller('ExampleController', ['$scope', function($scope) { 
    $scope.gridFields = { 
     id: { 
      width: 50 
     }, 
     price: { 
      width: 60 
     }, 
    }; 
    $scope.allData = { 
     'one': { 
      id: '1234qwe', 
      price: 900 
     }, 
     'two': { 
      id: 'asdadw', 
      price: 1700 
     }, 
     'three': { 
      id: '342sdaw', 
      price: 1200 
     }, 
    }; 
    $scope.edit = function(row) { 
     console.log(row); 
     $scope.buffer = $scope.allData[row]; 
    } 
}]); 

HTML

<div ng-app="bindExample"> 
    <div ng-controller="ExampleController"> 
     <table> 
     <tbody> 
      <tr ng-repeat="(row, data) in allData"> 
       <td ng-repeat="(field, option) in gridFields" ng-bind="data[field]"></td> 
       <td><button ng-click="edit(row)">edit</button></td> 
      </tr> 
     </tbody> 
     </table> 
     <div> 
     <input type='text' ng-model="buffer.id"/> 
     </div> 
     <div> 
     <input type='text' ng-model="buffer.price"/> 
     </div> 
    </div> 
</div> 

После нажатия на редактирования, значения идут до $ scope.buffer переменной от $ scope.allData, а входы использовать буфер в качестве модели, но при изменении ввода значения в переменной allData также меняются, но я не хочу этого, поэтому стараюсь передать значения другим ...

Проблема иллюстрируется здесь: JSFIDDLE

Любая идея?

Answer 1

Используйте angular.copy()

$scope.buffer = angular.copy($scope.allData[row]); 

Answer 2

Первых вещи, вы собираетесь получить неожиданные результаты в ng-repeat, если вы используете один из родителей object буквальные, а не массив (Angular гарантии оленьей кожи, что она будет перебирать ключи в порядке) :

$scope.allData = [ //you're better off using an Array 
      'one': { 
       id: '1234qwe', 
       price: 900 
      }, 
      'two': { 
       id: 'asdadw', 
       price: 1700 
      }, 
      'three': { 
       id: '342sdaw', 
       price: 1200 
      }, 
     ]; //see above 

Во-вторых, причина этого происходит то, что Javascript копирует все, в качестве эталона, если оно не является примитивным, поэтому, когда у НУ это сделать:

$scope.buffer = $scope.allData[row]; 

Вы на самом деле просто хранить указатель на исходный объект $scope.allData[row] в $scope.buffer.

Чтобы сделать «глубокую копию» yo ucan, используйте угловую.копию, предложенную @ moncefHassein-bey в его ответе.

Answer 3

Javascript будет содержать ссылку, если назначенные данные либо function, либо object или array.

Он предоставляет отличную выгоду разработчику разными способами. но если вы хотите удалить ссылку, вы должны ее клонировать.

с использованием углового

$scope.buffer = angular.copy($scope.allData[row]);