Kitra Kitra - 1 month ago 10
Javascript Question

Angularjs model not updating inside nested ng-repeat

I'm using nested ng-repeat to cycle inside properties of an array of objects and binding the model of the objects' values to inputs.
The problem is that when the values inside the inputs change, the model doesn't update.



var app = angular.module('app', []);
app.controller('main', function($scope) {
var vm = this;
vm.data = [{
"user": "*US/",
"lowFare": "*TP/<amount>/S<segment>/P<passenger>",
"fullFare": "*PR/<amount>/S<segment>/P<passenger>",
"selectedReason": "*REA/"
}, {
"user": "US/",
"selectedReason": "REA/"
}];
vm.description = {
"user": "User",
"lowFare": "Lowest fare *",
"fullFare": "Fare without restrictions *",
"selectedReason": "Reason for applying the fare"
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-cloak>
<div ng-controller="main as ctrl">
<div ng-repeat="block in ctrl.data">
<h4 align="center">block number {{$index}}</h4>
<table align="center">
<tr ng-repeat="(key,value) in block" align="center">
<td><span>{{ctrl.description[key]}}: &emsp;</span>
</td>
<td>
<input ng-model="value" />
</td>
</tr>
</table>
</div>
<h3 align="center">
<br/>Modify something and see that the model doesn't change: &emsp;
<br/>
</h3>
<p>
{{ctrl.data}}
</p>
</div>
</div>





Fiddle: https://jsfiddle.net/Kitra/qtxx9y35/

Answer

Just change ng-model="value" to ng-model="block[key]" and you will get the job done.

I´m not sure, but I guess it is related to the fact that javascript references objects and arrays, while primitive values are passed by value.

var app = angular.module('app', []);
app.controller('main', function($scope) {
  var vm = this;
  vm.data = [{
    "user": "*US/",
    "lowFare": "*TP/<amount>/S<segment>/P<passenger>",
    "fullFare": "*PR/<amount>/S<segment>/P<passenger>",
    "selectedReason": "*REA/"
  }, {
    "user": "US/",
    "selectedReason": "REA/"
  }];
  vm.description = {
    "user": "User",
    "lowFare": "Lowest fare *",
    "fullFare": "Fare without restrictions *",
    "selectedReason": "Reason for applying the fare"
  };

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-cloak>
  <div ng-controller="main as ctrl">
    <div ng-repeat="block in ctrl.data">
      <h4 align="center">block number {{$index}}</h4>
      <table align="center">
        <tr ng-repeat="(key,value) in block" align="center">
          <td><span>{{ctrl.description[key]}}: &emsp;</span>
          </td>
          <td>
            <input ng-model="block[key]" />
          </td>
        </tr>
      </table>
    </div>
    <h3 align="center">
          <br/>Modify something and see that the model doesn't change: &emsp;
          <br/>
          </h3>
    <p>
      {{ctrl.data}}
    </p>
  </div>
</div>