AngularJS 1.x中如何将对象值绑定到ng-model文本框

要实现将fieldValues.values数组中的每个值分别绑定到对应文本框，需要修改ng-repeat的遍历逻辑，并确保ng-model绑定到数组的单个元素上，具体方案如下：

1. 控制器代码（确保subkeys已定义） #

// 示例subkeys对象，实际根据你的业务数据调整
// var subkeys = { username: "admin", phone: "13800138000", address: "北京市" };
$scope.fieldValues = {
   keys: Object.keys(subkeys),
   values: Object.values(subkeys)
};

2. 视图模板修改 #

如果需要同时使用keys作为文本框的名称或标签，用以下写法：

<div ng-repeat="key in fieldValues.keys track by $index">
  <div class="">
    <label>{{key}}</label>
    <input type="text" name="{{key}}" ng-model="fieldValues.values[$index]" required />
  </div>
</div>

如果仅需遍历values数组生成文本框：

<div ng-repeat="val in fieldValues.values track by $index">
  <div class="">
    <input type="text" name="field_{{$index}}" ng-model="fieldValues.values[$index]" required />
  </div>
</div>

关键说明 #

• 使用track by $index是为了避免数组中存在重复值时，ng-repeat抛出重复键的错误。
• 绑定fieldValues.values[$index]而非直接绑定遍历变量（如val），因为ng-repeat中的遍历变量是原数组元素的副本，修改副本无法同步到原数组，通过索引绑定原数组元素才能实现真正的双向绑定。

内容的提问来源于stack exchange，提问作者User