Using input value in ng-repeat

Question

I'm having some trouble getting this to work. I have a form inside of a modal and I would like to generate some inputs based on a number the user enters in an input just above.

<form ng-submit="saveNewCategory(cat)">
      <div class="list">
        <label class="item item-input">
        <span class="input-label"><strong>Name:</strong></span>
          <input type="text" value="" placeholder="Hw" ng-model="cat.title">
        </label>
         <label class="item item-input">
        <span class="input-label"><strong>Number of {{cat.title}}</strong></span>
          <input type="tel" value="" ng-model="cat.number">
        </label>
        <!-- PROBLEM IS HERE -->
        <label class="item item-input" ng-repeat="i in range(cat.number)">
        <span class="input-label"><strong>blah</strong></span>
        <input type="tel" value="" >
        </label>
        <label class="item item-input">
        <span class="input-label"><strong>Total Points:</strong></span>
          <input type="tel" value="" ng-model="cat.total">
        </label>
        <label class="item item-input">
        <span class="input-label"><strong>Weight:</strong></span>
          <input type="tel" value="" ng-model="cat.weight">
        </label>
      </div>
      <div class="padding">
        <button type="submit" class="button button-block button-positive">Save</button>
      </div>
    </form>

In my controller that range function is

$scope.range = function(n) {
    return new Array(n);
};

So why is this not working? Only one input element ever gets generated. Can you not use form model object values in ng-repeat?

Thanks for any and all help!

could you bring it in fiddle ?

Narek Mamikonyan
– Narek Mamikonyan

2014-08-26 15:53:42 +00:00
Commented Aug 26, 2014 at 15:53 — Narek Mamikonyan
– Narek Mamikonyan, Commented Aug 26, 2014 at 15:53
This might help you in creating a range..

PSL
– PSL

2014-08-26 16:11:08 +00:00
Commented Aug 26, 2014 at 16:11 — PSL
– PSL, Commented Aug 26, 2014 at 16:11

scarlz · Accepted Answer · 2014-08-26 18:03:00Z

1

Currently, your $scope.range function is creating a new array with a string representation of val, which means it'll only ever have one element (the value itself). Instead, try:

$scope.range = function(n) {
  return new Array(Number(n));
}

Then, as you will have an array of undefined elements, you will need to use the track by option:

<label ng-repeat="i in range(cat.number) track by $index">

Or, alternatively, keep your existing markup but change $scope.range to create an array of incrementing numbers:

$scope.range = function(n) {
   return Array.apply(null, {length: n}).map(Number.call, Number);
}

edited Aug 26, 2014 at 18:03

answered Aug 26, 2014 at 16:03

scarlz

2,5121 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Panda4Man Over a year ago

I wasn't able to get your first solution to work but using the map in the second solution worked. Thanks!

scarlz Over a year ago

Re: first solution, I meant to put by $index not by $id - I've corrected my answer.

Collectives™ on Stack Overflow

Using input value in ng-repeat

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related