使用 ng-repeat 和 $index 设置模型属性答案

【问题标题】：Use ng-repeat and $index to set the model property使用 ng-repeat 和 $index 设置模型属性
【发布时间】：2021-01-04 19:01:56
【问题描述】：

我可以使用 ng-repeat 和 $index 来动态设置模型属性吗？

我正在尝试做这样的事情：

<div ng-repeat="x in [].constructor(10) track by $index">
  <input ng-model="model.prop{{$index}}">    
</div>

我希望我的模型以这样的方式结束（即这些属性在控制器代码中不存在，我希望它们被动态添加）：

{
  "prop0": "val",
  "prop1": "val",
  "prop2": "val",
  "prop3": "val",
  "prop4": "val",
...
  "prop10": "val"

  "otherProperty": "xxx"
}

我不希望属性是一个数组，我需要在不更改控制器的情况下这样做。

谢谢

【问题讨论】：

【解决方案1】：

您可以在指令ng-repeat中迭代对象（键、值）

控制器

$scope.props = {
  "prop0": "val",
  "prop1": "val",
  "prop2": "val",
  "prop3": "val",
  "prop4": "val",
...
  "prop10": "val"
}

HTML：

<div ng-repeat="(key, value) in props">
  <input ng-model="props[key]">    
</div>

在某些情况下，您应该避免使用 track by $index，请查看 AngularJs 文档中的 Tracking and Duplicates 和 StackOverflow 上的 When not to use 'track by $index' in an AngularJS ng-repeat?。

【讨论】：

【解决方案2】：

排序，我这样做了：

<div ng-repeat="x in [].constructor(10) track by $index">
  <input ng-model="model.['prop' + ($index)]">    
</div>

【讨论】：