AngularJS dynamic forms with ng-repeat

Question

i am working with AngularJS dynamic forms . According to my userid value i generated multiple form field with same model name using ng-repeat. i am not able to get this input model values due to this ng-repeat. in this example i am using static userid data.

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="myid in userid">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>

                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
</div>

my js code

var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', function($scope) {
   $scope.userid = [1, 2, 3];
   $sope.adduser = function() {

}
});

i need to send array of objects to my server.my userid also dynamic it has more than 100 data. how can i get each and every data field model value? and how to convert those model data into array of objects like my sampleserver data?

i am expecting my final output data like this

var sampleServerData = [{
        "userid": 1,
        "manualcomment": "mycmt1",
        "gender": "male"
    }, {
        "userid": 2,
        "manualcomment": "mycmt2",
        "gender": "male"
    }, {
        "userid": 3,
        "manualcomment": "mycmt3",
        "gender": "female"
    }]

Answer 1

You should change your textarea id to a class or create a textarea id in your user object(more on that below).

If the id's you have to work with are in an array, then create an array of objects based on you ids array.

var ids = [1, 2, 3];
var users = ids.map(function(id) {
   return {id: id, comment: "", gender: ""};
})

I think I have a solution for you, I made you a jsbin. Make sure you hit the run with js button, for some reason it doesn't run onload.

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="user in users">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="user.gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
 </div>

JS

    var myApp = angular.module('myApp', []);
     myApp.controller('myCtrl', function($scope) {
      $scope.ids = [1, 2, 3];
   
      $scope.users = $scope.ids.map(function(id) {
        return {id: id, comment: "", gender: ""};
      });

      $scope.adduser = function() {
        var data = $scope.users.map(function(user) {
          return {
           "userid": user.id,
           "manualcomment": user.comment,
           "gender": user.gender
          }
      });
     
      console.log("data", data)
  }
});

Answer 2

In your HTML file you can call ng-repeat like this;

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <form role="form" name='userForm' novalidate>
            <div class="container">
                <div class="row" ng-repeat="myid in userId">
                    <div class="form-group">
                        <div class="col-md-3">
                            <label>ID</label>
                            <input ng-model="userId[$index].id" id="myid"name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                        </div>
                        <div class="col-md-3">
                            <label>Comments</label>
                            <textarea ng-model="userId[$index].manualcomment" id="textarea1" rows="1" required></textarea>
                        </div>

                        <div class="col-md-3 ">
                            <label>Gender</label>

                            <select ng-model="userId[$index].gender" name="select2" required>
                                <option value="male">Male</option>
                                <option value="female">Female</option>

                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="buttonContainer text-center btn-container">
                <br>
                <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="addusers()">Add user</button>
                <button type="button" class="btn button--default btn--small pull-center">Close</button>
            </div>
        </form>
    </div>

And then in the controller.

var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', function($scope) {
   $scope.userId = [1,2,3,4,5] // or new Array(3);

   $sope.adduser = function() {
     var serverData = $scope.userId;
   }
});

Answer 3

you can use track by $index in ng-repat and then use the index for models

<div class="row" ng-repeat="myid in userid track by $index">

<div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="userId[$index].id" id="myid"name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="userId[$index].manualcomment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="userId[$index].gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>

                        </select>
                    </div>