angularjs two-way binding inside ng-repeat

Question

I have an Angular controller variable defining the look-and-feel of a bunch of fields which I want to render in a template. The initial value of my underlying model correctly appears in the input element, but it doesn't change when I change the content of that element.

Here is some code:

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>

(Don't worry about the "{% verbatim ng %}" stuff - that's just there b/c I'm using Django.)

This correctly displays two input fields with an initial value of "fred" and "jones" respectively. But when I change the value in those fields, there is no corresponding change to the my_controller.model object.

Any hints?

Thanks.

why are you using ng-repeat when your variable my_controller.fields is not an array? — Aleksey Solovey
– Aleksey Solovey, Commented Oct 31, 2017 at 16:35
@AlekseySolovey - Thanks. I have changed the example to be an array. The error still remains, though. — trubliphone
– trubliphone, Commented Oct 31, 2017 at 16:53
What is user_controller? If your controller is my_controller. — Stanislav Kvitash
– Stanislav Kvitash, Commented Oct 31, 2017 at 16:55
@StanislavKvitash - Thanks. I have changed the example. user_controller was left over from the original code; This is obviously a very scaled-back example just to illustrate the problem. — trubliphone
– trubliphone, Commented Oct 31, 2017 at 17:07
@trubliphone Thanks! I've thought it was some kind of bad copy-paste :) Posted an answer meanwhile, you can try it. — Stanislav Kvitash
– Stanislav Kvitash, Commented Oct 31, 2017 at 17:10

Stanislav Kvitash · Accepted Answer · 2017-10-31 17:08:18Z

1

Doing this "model": user_controller.model.first_name will just assign value to the model field and it will not create a reference to my_controller.model.field_name.

You can simply use bracket notation to modify the my_controller.model fields:

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>

answered Oct 31, 2017 at 17:08

Stanislav Kvitash

4,63221 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

trubliphone Over a year ago

Thanks. This is definitely the right direction. My actual model is quite a bit more complex, but I'm confident I'll get it working soon and accept this answer.

trubliphone Over a year ago

Stanislav's answer is correct. However, for very complex ng-model paths (ie: model.submodel.submodel[23].property), I found this answer quite helpful.

Stanislav Kvitash Over a year ago

I agree, this is for quite simple models. For more complex your mentioned answer from other post will work. Anyway, glad you was able to sort this out.

Collectives™ on Stack Overflow

angularjs two-way binding inside ng-repeat

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related