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

Question

Can I use ng-repeat and $index to set a model property dynamically?

I'm trying to do something like this:

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

And I want my model to end up like this (i.e. so these properties don't exist in the controller code, I want them to be dynamically added):

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

  "otherProperty": "xxx"
}

I don't want the properties to be an array and I need to do this without changes to the controller.

Thanks

score 0 · Answer 1 · edited Dec 31 '20 at 14:47

0

You can iterate object (key, value) in directive ng-repeat

Controller

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

In some cases you should avoid using track by $index please check Tracking and Duplicates in AngularJs doc and When not to use 'track by $index' in an AngularJS ng-repeat? on StackOverflow.

edited Dec 31 '20 at 14:47

georgeawg

answered Dec 31 '20 at 12:09

Abinesh Joyel

Hi @Abinesh Joyel, very close I've changed my question slightly – Sun Jan 04 '21 at 10:27

score 0 · Accepted Answer · answered Jan 04 '21 at 11:01

0

Sorted, I did this:

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

answered Jan 04 '21 at 11:01

Sun

this worked for you? did you have to create some sort of directive? id love to see your controller. do you think you can explain your solution? – chadlei Dec 02 '21 at 01:14

2 Answers2