Angularjs的模型在嵌套的ng-repeat中没有更新

Angularjs model not updating inside nested ng-repeat

本文关键字:更新 嵌套 模型 Angularjs ng-repeat      更新时间:2023-09-26

我使用嵌套的ng-repeat在对象数组的属性内部循环,并将对象值的模型绑定到输入。问题是,当输入中的值发生变化时,模型不会更新。

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>

小提琴:https://jsfiddle.net/Kitra/qtxx9y35/

只需将ng-model="value"更改为ng-model="block[key]",就可以完成任务了。

我不确定,但我猜这与javascript引用对象和数组的事实有关,而原始值是按值传递的。

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>

试着像这样改变你的"ng-model"属性:

<input ng-model="block[key]" />
https://jsfiddle.net/mladenplavsic/qtxx9y35/51/