使用 ng-model 修改 (key,value) 无法更新父对象答案

【问题标题】：Using ng-model to modify (key,value) fails to update parent object使用 ng-model 修改 (key,value) 无法更新父对象
【发布时间】：2017-09-28 11:33:30
【问题描述】：

我正在使用一个 API，其中服务器需要一个带有动态密钥的 json 有效负载。预期的 json：

[ 
  {"hello" : "world"},
  {"someuser" : "somepass"}
]

我在 Angularjs 中使用 ng-model 来动态填充 UI 上的这些标头，并在用户点击提交后发送有效负载。

<li ng-repeat="header in headers track by $index">
  <div ng-repeat="(key, value) in header">
    <input type="text" placeholder="header key.." ng-model="key" />
    <input type="text" placeholder="header value.." ng-model="value" />
    <br/> key is {{key}} and value is {{value}}
  </div>
</li>

Plunker demo

key 和 value 的本地值被修改，但看起来父对象没有被双向数据绑定修改。

暂时的解决方法

我的后备代码使用固定键并在发送有效负载之前翻译结构，但我仍然想知道这是否可能。翻译后的json：

[
  {
    "field": "someuser",
    "value": "somepass"
  },
  ...
]

HTML：

<li ng-repeat="header in headers track by $index">
    <input type="text" placeholder="header key.." ng-model="header.field" />
    <input type="text" placeholder="header value.." ng-model="header.value" />
  </div>
</li>

编辑：修复了预期和翻译的 json

【问题讨论】：

你说的ng-model="header.field"是什么意思？
@RameshRajendran 这是我现在使用的解决方法 - 它基本上是通过固定键定义值。因此，我列出的新 json 具有 field 和 value 固定键来保存可在 ng-model 字段中使用的值。它与原始问题无关。我已经通过编辑帖子说清楚了

标签： angularjs angularjs-ng-repeat angularjs-ng-model

【解决方案1】：

html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>

        <div ng-repeat="(key, value) in headers">
          <input type="text" placeholder="header key.." ng-model="headers[$index]['key']" />  
          <input type="text" placeholder="header value.." ng-model="headers[$index]['value']" />
          <br/>
          key is {{key}} and value is {{value}}
        </div>
      <li>
        <button ng-click="addHeader()">add header</button>
      </li>
    </ul>
    {{headers | json}}
  </body>

</html>

js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.headers = [];

  $scope.addHeader = function() {
    $scope.headers.push({key:"",value:""})
  }
});

【讨论】：

@Naimad 我认为是一样的，请验证
他有一个带有键值的json，现在你有一个带有2个键值的json。
@Naimad 不能仅对对象进行多个值。您必须采取数组必须并且需要使用键和值将对象推送到数组中
@PareshGami - 正如 Naimad 所说，这改变了 json 的结构，我现在已经在我的解决方法中这样做了。问题是我必须在 CRUD 操作上的两个 json 对象中进行翻译。