Question

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

＆＃13;

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"
  };

});

＆＃13;

<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>

＆＃13;

小提琴：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>

Answer 2

尝试更改“ng-model”属性，如下所示：

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

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

Angularjs模型不在嵌套的ng-repeat内更新

2 个答案: