Angularjs: Dynamic Input in a single array for row

Question

I'm a newbie and I need some help for something you'll maybe find too easy.

I want to add with a single button different inputs at the same time. I don't know how to manage. This is what I'm doing, and I'm blocked. I'll thank you your ideas.

So, my form shows each name and an input box for entering the age of that person (We don't know how many persons are in 'people'). And in the end, an 'submit' button that calls the showAll() function.

And then, I just want to show the content of the array in console.log

A Form like this: Form with only 3 people

HTML:

<form name="myForm3">
  <div class="form-group row" ng-repeat="person in people track by $index">
    <label for="player" class="col-xs-3 col-form-label text-right">{{ person.name }}</label>
    <div class="col-xs-2">
      <input class="form-control" type="text"  ng-model="person.age[$index]" required>
    </div>
  </div>                    
    <button type="submit" class="btn btn-success btn-lg" ng-click="showAll()" >Show all</button>
</form>

controller.js:

  $scope.person = [];
  // POST
    $scope.showAll = function() {
        for (var i=0; i < person.length; i++){ 
    console.log('person: ' + {{ $scope.person[i] }} );

  }
}

Yaser · Accepted Answer · 2016-12-21 03:14:47Z

1

you can hide the inputs by using ng-if or ng-hide and show them on showAll by setting that variable used by those to true or false:

<div class="col-xs-2" ng-if="person.show">
  <input class="form-control" type="text"  ng-model="person.age[$index]" required>
</div>

And in showAll:

$scope.showAll = function() {
    for (var i=0; i < $scope.people.length; i++) { 
        $scope.people[i].show = true;
    }
};

answered Dec 21, 2016 at 3:14

Yaser

5,7391 gold badge18 silver badges28 bronze badges

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

1 Comment

user3096769 Over a year ago

No, that's not what I was looking for. console.log was just a way to know if I can get the data from the new array people, wich contains all names and ages saved with the same button. i.e.: I'm unable to see what's in people.age[1]. It seems that is not the right way to save all inputs at the same time. If that would be with different fields, it would be easy. But with the same field (age)... I can't do it!

Collectives™ on Stack Overflow

Angularjs: Dynamic Input in a single array for row

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related