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

Question

我可以使用 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"
}

我不希望属性是一个数组，我需要在不更改控制器的情况下执行此操作。

谢谢

Answer 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 请查看 Whosebug 上的 Tracking and Duplicates in AngularJs doc and When not to use 'track by $index' in an AngularJS ng-repeat?。

Answer 2

已排序，我这样做了：

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

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

Use ng-repeat and $index to set the model property

angularjs

angularjs-ng-repeat

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

Use ng-repeat and $index to set the model property

angularjs

angularjs-ng-repeat

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