Add dynamic html for multiple elements to Angularjs form and use it in the scope on button click

Question

I have this form:

 <h4>Now let’s break it down. Tell us about the users.</h4>
            <div id="user1">
                <p class="bold">User #1</p>
                <label>User type:</label>
                <input type="radio" name="user-type" value="commercial" checked> Commercial &nbsp;<input type="radio" name="trial" value="trial"> Trial<br/>

                <div id="commectial-user">
                    <label>User Name:</label>
                    <input type="text" name="user-name">
                    <label>Email:</label>
                    <input type="text" name="email">
                    <label>Password:</label>
                    <input type="password" name="password">
                    <label>Name:</label>
                    <input type="text" name="name">
                    <button id="next-user" class="smallbutton">Click here to add another user if applicable….</button>
                    <br/><br/>
                </div>
            </div>

This will be a part of larger angular form but I want the user to be able to add multiple forms for adding a user within the form. So for example if a user clicks the button with id of next-user I want to display the same fields but then to have distinct values for the new user when the saving operation will be happening.

So basically I have two questions:

1. How can I add multiple html forms such as this one on button click in angular
2. Once the user will click the save button how can I retrieve the data from the multiple forms such as the one above?

Answer 1

The pure angular way to do this is to use a controller function to add users and ng-repeat to render the collection of users without resorting to any DOM manipulation in code. Here's a working plunk

Controller

app.controller('MainCtrl', function($scope) {
  $scope.users = [{
    username: 'jsmith',
    email: 'jsmith@gmail.com',
    password: '123456',
    name: 'John Smith',
    userType: 'commercial'
  }, {
    username: 'asmith',
    email: 'asmith@gmail.com',
    password: '123456',
    name: 'Alice Smith',
    userType: 'trial'
  }, {
    username: 'dsmith',
    email: 'dsmith@gmail.com',
    password: '123456',
    name: 'David Smith',
    userType: 'commercial'
  }];

  $scope.addUser = function() {
    var newUser = {
      username: '',
      email: '',
      password: '',
      name: '',
      userType: 'commercial'
    };
    $scope.users.push(newUser);
  };
});

HTML

<div ng-repeat="user in users">
  <p class="bold">User {{$index+1}}</p>
  <label>User type:</label>
  <input type="radio" ng-model="user.userType" value="commercial"> Commercial &nbsp;
  <input type="radio" ng-model="user.userType" value="trial"> Trial
  <br/>

  <div>
    <div>
      <label>User Name:</label>
      <input type="text" ng-model="user.username">
    </div>
    <div>
      <label>Email:</label>
      <input type="text" ng-model="user.email">
    </div>
    <div>
      <label>Password:</label>
      <input type="password" ng-model="user.password">
    </div>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="user.name">
    </div>
    <br/>
   </div>
</div>
<div>
   <button class="smallbutton" ng-click="addUser()">Click here to add another user if applicable….</button>
</div>