0

I'm building a web app with angularjs and would like to have a dynamic form. I have a form-control that allows you to select a number 1-10 and I would like that when you select a number, that amount of new input fields displays below.

I'm using it for a workout app, so let's say this option is for "reps". The user selects 5, and now 5 input fields show below where they can enter the info for each of the 5 reps they completed.

How can I do this?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Bcavanaugh934
  • 79
  • 1
  • 11
  • in general its best if you add a jsfiddle to your code or at least desplay its decency if someone is going to do work for you you can make it as easy as possible for them you can add actual code here by writting teh code and indenting it 8 times or selecting it and pressing ctr-k – Aaron Rabinowitz Oct 13 '15 at 20:54

3 Answers3

1

For iteration purposes there is ng-repeat directive in angular.

For using ng-repeat with range, not with iterable collections you can create your own filter (checkout this answer).

Using that filter you simply create "reps" option on controller scope and write smth like next: <input ng-repeat="n in [] | range:reps" type="text" name="firstname">

Community
  • 1
  • 1
Roman Tymchyshyn
  • 64
  • 1
  • 11
0
var i;
var inputFields;
formcontroll =inputfields; //i dont know what you used for form controll the number returned
for (i=0; i<inputfields; i++) {
   $('i dont know where you want to put it').append('i dont know what you want to attach');
};

there might be a better way using angular that would be instant

Aaron Rabinowitz
  • 357
  • 2
  • 18
0

This works:

var myAppModule = angular.module('ngApp', []);
myAppModule.controller('ngController', function($scope) {
  $scope.reps = [];
  $scope.addReps = function(n) {
    for (var i=0; i<n; i++) {
      $scope.reps.push(i);
      console.log($scope.reps);
    }    
  }
});

Then use the following html:

<div ng-app="ngApp">
  <div ng-controller="ngController">

    <button ng-click="addReps(1)">1</button>
    <button ng-click="addReps(2)">2</button>
    <button ng-click="addReps(3)">3</button>
    <button ng-click="addReps(4)">4</button>
    <button ng-click="addReps(5)">5</button>

    <br>

    <div ng-repeat="n in reps">
        <input type="text" name="reps-{{n}}" />
    </div>

  </div>
</div>

Heres the working pen: http://codepen.io/ezy/pen/ojeKaX

harkl
  • 872
  • 7
  • 17