pro.mean pro.mean - 4 months ago 21
AngularJS Question

How to create ng-model array with ng-repeat(number)

I have 2 step form

on step 1 : ask user to how many input form needed

that use in

< input type="number" ng-model="vm.nkeys"
/>`

on step 2 : want to create one input text for each with ng-model and name attribute in array form so that I can capture the every input box value; but both is not working; see the relevant code and wokrking plunker below.

<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
<div class="text-center m-t-md">
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
</div>
</div>
</div>


tried
ng-model="key_desc[{{$index+1}}]
but no success; also
name=description_{{$index}}
is also not working

see the demo plunker

what do I need to do?

Answer

Have a look at the sample snippet below:

<div ng-repeat="item in getNumber(key) track by $index">
  <input type="text" ng-model="text[$index]" name="input_{{$index}}" />
  <span ng-if="text[$index]">
  - {{text[$index]}}
  </span>
</div>

Refer the demo here.

See your code now:

<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
   <!-- Other stuff -->
   <input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>

See you code here.

Comments