У меня проблема с двунаправленными данными при использовании ng-модели

Question

Я бы хотел понять, почему со мной происходит следующая ошибка.

В настоящее время у меня есть служба, которая возвращает объект .
Эта служба используется для обмена информацией между двумя контроллерами, контроллером "1" и контроллером "2" .
Из контроллера "2" я обновляю информацию о драйвере "1".

Ошибка:
При изменении информации в контроллере "1" я такжеобновить информацию контроллера "2" (нежелательно).
В моем контроллере «2» я не использую сервис для загрузки моей информации, ее не следует изменять.

Демо:

Пример Скрипка .

Действия по воспроизведению ошибки:

1. Нажмите кнопку «Редактировать» в любом ряду.(Информация загружается в форму).
   
2. Редактировать поле «Цена» (информация в таблице изменена) (Нежелательно).
   

Также выясните, что для получения данных «однонаправленным» способом вы можете использовать ng-value.

Дополнительные вопросы:

1. Какя могу отправить свои данные в службу, не влияя на информацию в таблице (контроллер "2")?
   
2. Правильно ли реализовать ng-value вместе с ng-model?Не могли бы вы объяснить, как?
   

Спасибо!

Код скрипты:
app.js

angular.module("app", [])
.factory("Service", function(){
    var data={}
  return data;
})
.controller("FormController", function($scope, Service){
    $scope.service = Service;
  $scope.updateData = function(data){
    //TODO: Implement logic to update database
  }

})
.controller("DataController", function($scope, Service){
  $scope.service = Service;
  // Fake database
  $scope.dataPrices = [
    {
        code: 'AA',
        price: 111
    },
    {
        code: 'BB',
        price: 222
    },
    {
        code: 'CC',
        price: 333
    }
  ];
    $scope.editData = function(index){
        $scope.service.data = $scope.dataPrices[index];
    }
});

index.html

<div ng-app="app">
<div ng-controller="FormController" >
<form name="mainForm"  novalidate>
    <div>
        <label>Code</label>
        <div>
            <input
                type="text"
                name="code"
                ng-required="true"
                ng-disabled="true"
                ng-model="service.data.code"
            />
        </div>
    </div>

    <div>
        <label>Price</label>
        <div>
            <input
                    type="number"
                    name="price"
                    ng-required="true"
                    ng-model="service.data.price"
            />
        </div>
    </div>
    <div>
        <button
          type="submit" 
          ng-click="updateData(data)">
          Save
      </button>
    </div>
</form>
</div>
<div ng-controller="DataController">
    <table>
        <tr>
            <th>Code</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="dat in dataPrices">
            <td>{{dat.code}}</td>
            <td>{{dat.price}}</td>

            <td>
                <button ng-click="editData($index)">
                    Edit
                </button>
            </td>
        </tr>
    </table>
</div>
</div>

Answer 1

Вам придется использовать

angular.copy($scope.dataPrices[index])

, чтобы избежать обновления данных в таблице.Это создаст глубокую копию вашего объекта.

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

Вот рабочий пример https://jsfiddle.net/q7L4ebaz/1/