angularjs ng-repeat 中的双向绑定

Question

我有一个 Angular 控制器变量，它定义了我想在模板中呈现的一堆字段的外观。我的基础模型的初始值正确出现在输入元素中，但当我更改该元素的内容时它不会改变。

这是一些代码：

app.js

(function() {
  var app = angular.module("my_app", []);
    app.controller("MyController", function() {
      var my_controller = this;
      my_controller.model = {
        "first_name": "fred",
        "last_name": "jones"
      }
      my_controller.fields = [
         {
          "name": "first_name",
          "label": "First Name",
          "is_required": true,
          "model": my_controller.model.first_name
         },
        {
          "name": "last_name",
          "label": "Last Name",
          "is_required": true,
          "model": my_controller.model.last_name
         }
       ]
})();

template.html:

<div ng-app="my_app">
  <div ng-controller="MyController as my_controller">
    <div ng-repeat="field in my_controller.fields">
      {% verbatim ng %}
        <label for="id_{{ field.name }}" ng-class="field.is_required ? 'required' : 'optional'">{{ field.label }}:&nbsp;</label>
        <input type="{{ field.type }}" class="form-control" name="{{ field.name }}" id="id_{{ field.name }}" ng-model="field.model">
      {% endverbatim ng %}
     </div>
  </div>
</div>

（不用担心“{% verbatim ng %}”的东西 - 就在那里 b/c 我正在使用 Django。）

这会正确显示两个输入字段，其初始值分别为 "fred" 和 "jones"。但是当我更改这些字段中的值时，my_controller.model 对象没有相应的更改。

有什么提示吗？

谢谢。

Answer 1

这样做 "model": user_controller.model.first_name 只会将值赋给 model 字段，而不会创建对 my_controller.model.field_name 的引用。

您可以简单地使用 bracket notation 修改 my_controller.model 字段：

angular.module('app', [])
.controller('testController',
  function testController($scope) {
  
      var my_controller = this;
      
      my_controller.model = {
        first_name: "fred",
        last_name: "jones"
      };
      
      my_controller.fields = [
         {
          "name": "first_name",
          "label": "First Name",
          "is_required": true
         },
        {
          "name": "last_name",
          "label": "Last Name",
          "is_required": true
         }
       ];
       
});

<body ng-app="app">
<div class="table-responsive" ng-controller="testController as my_controller">
      <div ng-repeat="field in my_controller.fields">
  
        <label for="id_{{ field.name }}" ng-class="field.is_required ? 'required' : 'optional'">{{ field.label }}:&nbsp;</label>
        <input type="{{ field.type }}" class="form-control" name="{{ field.name }}" id="id_{{ field.name }}" ng-model="my_controller.model[field.name]">

     </div>
     -----------------------------------
     <br/>
     <code>{{my_controller.model}}</code>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

angularjs ng-repeat 中的双向绑定

angularjs two-way binding inside ng-repeat

angularjs

angularjs-ng-repeat

angular-ngmodel