Question

子对象怎么没有得到双向绑定：

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script>
    angular.module('app', []).controller('testCtrl', function($scope) {
      $scope.doc = { "foo": "bar", "baz": { "zab": "rab" }}
    })
  </script>
</head>
<body>
  <form ng-controller="testCtrl">
    <label><span>Foo</span><input ng-model="doc.foo"></label>
    <fieldset>
      <legend>Baz</legend>
      <label ng-repeat="(key,val) in doc.baz">
        <span>{{key}}</span><input ng-model="val">
      </label>
    </fieldset>
    <pre><code>{{doc | json}}</code></pre>
  </form>
</body>
</html>

如果我编辑foo，我可以看到它更新。但是，如果我编辑zab，我看不到任何更改。

有没有办法使这项工作，如果没有，另一种数据结构（如baz是一个对象数组）可以使它工作？

Answer 1

将ng-model更改为：

<span>{{key}}</span><input ng-model="doc.baz[key]">

val不更新外部作用域（testCtrl的作用域）的原因是ng-repeat为每次迭代创建一个新作用域 - 因此您只将输入框绑定到val的本地（迭代）作用域副本，不是较大对象的父级范围部分。

具有子对象的对象的AngularJS表单

1 个答案: