javascript - 我在使用 ng-model 时遇到双向数据问题

Question

我希望能够理解为什么我会发生以下错误。

我目前有一个返回对象的服务。
此服务用于在两个 Controller ( Controller “1” 和 Controller “2”)之间共享信息。
我从 Controller “2”更新驱动程序信息“1”。

错误:
当 Controller “1”中的信息被修改时，我也会更新 Controller “2”信息(不需要)。
在我的 Controller “2”中，我不使用该服务来加载我的信息，不应修改它。

演示:

Fiddle 上的示例.

重现错误的步骤:

1. 按任意行中的“编辑”按钮。 (信息已加载到表单中)。
   
2. 编辑“价格”字段(表格中的信息被修改)(不需要)。
   

还要调查一下，要以“单向”方式获取数据，您可以使用 ng-value。

其他问题:

1. 如何将数据发送到服务而不影响表( Controller “2”)中的信息？
   
2. 将 ng-value 与 ng-model 一起实现是否正确？你能解释一下怎么做吗？
   

谢谢!

fiddle 代码:
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])

避免更新表中的数据。它将创建您的对象的深拷贝。

为了将数据发送到服务，您需要在服务中创建 getter setter 方法。

这是工作示例 https://jsfiddle.net/q7L4ebaz/1/