javascript - Angularjs 模型未在嵌套 ng-repeat 内更新

Question

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

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 1

只需将 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>