При использовании ng-модели для изменения (ключ, значение) не удается обновить родительский объект

Я работаю с API, где сервер ожидает полезную нагрузку JSON с динамическими ключами. Ожидаемый JSON:

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

Я использую ng-модель в Angularjs, чтобы динамически заполнять эти заголовки в пользовательском интерфейсе и отправлять полезную нагрузку, когда пользователь нажимает кнопку подтверждения.

<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

Источник

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:""})
  }
});
Источник
Другие вопросы по тегам