двусторонняя привязка angularjs внутри ng-repeat

У меня есть переменная контроллера 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 %}" - это просто потому, что я использую Django.)

Это правильно отображает два поля ввода с начальным значением «fred» и «jones» соответственно. Но когда я меняю значение в этих полях, в объекте my_controller.model нет соответствующего изменения.

Любые подсказки?

Спасибо.


angularjs angularjs-ng-repeat angular-ngmodel
person trubliphone    schedule 31.10.2017    source источник
comment
почему вы используете ng-repeat, когда ваша переменная my_controller.fields не является массивом?   -  person Aleksey Solovey    schedule 31.10.2017
comment
@AlekseySolovey - Спасибо. Я изменил пример, чтобы он был массивом. Однако ошибка все еще остается.   -  person trubliphone    schedule 31.10.2017
comment
Что такое user_controller? Если ваш контроллер my_controller.   -  person Stanislav Kvitash    schedule 31.10.2017
comment
@StanislavKvitash - Спасибо. Я изменил пример. user_controller осталось от исходного кода; Очевидно, что это очень урезанный пример, просто чтобы проиллюстрировать проблему.   -  person trubliphone    schedule 31.10.2017
comment
@trubliphone Спасибо! Я уж подумал, что это какой-то плохой копипаст :) Тем временем выложил ответ, можешь попробовать.   -  person Stanislav Kvitash    schedule 31.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

При этом "model": user_controller.model.first_name просто присвоит значение полю model и не создаст ссылку на my_controller.model.field_name.

Вы можете просто использовать обозначение скобок для изменения поля 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>

person Stanislav Kvitash    schedule 31.10.2017
comment
Спасибо. Это определенно правильное направление. Моя реальная модель немного сложнее, но я уверен, что скоро заработаю и приму этот ответ. - person trubliphone; 31.10.2017
comment
Станислав ответил правильно. Однако для очень сложных путей ng-модели (например: model.submodel.submodel[23].property) я нашел этот ответ весьма полезным. - person trubliphone; 01.11.2017
comment
Согласен, это для совсем простых моделей. Для более сложного будет работать упомянутый вами ответ из другого поста. В любом случае, рад, что вы смогли разобраться с этим. - person Stanislav Kvitash; 01.11.2017