时间戳

首页 > 解决方案 > ng-repeat 中的 ng-model 不更新参考对象

javascript - ng-repeat 中的 ng-model 不更新参考对象

问题描述

在我的控制器中，我有一个对象：

$scope.selectedMap = {
    map: '', mapDesc: '', stops_json: "", stopLength: []
};

此对象中的stops_json键包含另一个对象，如下所示：

{
  desc: "PRG-BUD-HR-PAY",
  stop1:"DEPT",
  stop2:"ACCT",
  stop3:"ACCT2",
  stop4: 158,
  stop5:"CCT",
  stop6:"CCA",
  stop7: 156
}

我在 ng-repeat 中使用这个子对象，并为每个停止生成输入：

<p class="row col-md-12">
  <strong>Description:&nbsp;</strong>{{ selectedMap.stops_json.desc }}
</p>
<div class="row col-md-12 float-left">
    <md-input-container ng-repeat="stop in selectedMap.stops_json" ng-if="!$first" ng-model="stop" class="col-md-12">
        <label>Stop&nbsp;{{ $index }}:</label>
        <input class="col-md-8 float-left mapStops" ng-model="stop" aria-label="Route Stop Description">
    </md-input-container>
</div>

我的问题是，当我更改输入标签的值时，stops_json对象不会改变。我的印象是它应该这样做，因为那是被建模的对象。我明显错了，有人可以教育我吗？

标签： javascriptangularjsjsonangularjs-ng-repeatangularjs-material

解决方案

先说几个问题：

  • 用于迭代对象的符号ng-repeat是(key, value) in obj
  • 如果您选择使用对象迭代，ng-repeat那么您的ng-if依赖$first是不确定的（即不能保证以键定义顺序进行迭代）
  • 应用ng-model绑定以ng-repeat使其组成部分可编辑是不正确的——应该ng-model应用每个项目的模型

我已经创建了您的片段的精简示例，以演示使重复输入能够更改stops_json模型。

看这里。

基本上，您需要确保直接绑定到模型中的input元素，以便任何编辑都会影响它。ng-repeatstops_json

另外，请注意，所有数字属性都应使用 的type="number"变体input，否则任何编辑都会将值设置为字符串。

推荐阅读