CODEWITHSUNDEEP
javascriptangularjs
Kitra
Kitra

Reputation: 13

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/

Upvotes: 0

Views: 1079

Answers (2)

mladen.plavsic
mladen.plavsic

Reputation: 189

Try changing your "ng-model" attribute like this:

<input ng-model="block[key]" />

https://jsfiddle.net/mladenplavsic/qtxx9y35/51/

Upvotes: 0

sergio0983
sergio0983

Reputation: 1268

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>

Upvotes: 3

Related Questions