Динамические формы AngularJS с ng-repeat

я работаю с динамическими формами AngularJS. В соответствии с моим значением идентификатора пользователя я создал несколько полей формы с одним и тем же именем модели, используя ng-repeat. я не могу получить значения этой входной модели из-за этого ng-repeat. в этом примере я использую статические данные идентификатора пользователя.

<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() {

}
});

Мне нужно отправить массив объектов на мой сервер. Мой идентификатор пользователя также динамический, он содержит более 100 данных. как я могу получить каждое значение модели поля данных? и как преобразовать эти данные модели в массив объектов, таких как данные моего сервера сэмплов?

я ожидаю, что мои окончательные выходные данные будут такими

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

javascript angularjs angularjs-ng-repeat angularjs-forms
person kannanc    schedule 07.09.2017    source источник
comment
Вы уже не получаете свои данные в виде массива объектов?   -  person Vamshi Gudipati    schedule 07.09.2017
comment
нет, я не получил никакого массива объектов, хотя я не получил никакого значения модели из этой формы. я получаю массив идентификаторов пользователей с моей предыдущей страницы. Здесь я дал только статические данные для моего идентификатора пользователя. в соответствии с этим идентификатором пользователя я создаю форму. я также упоминаю мои ожидаемые окончательные выходные данные. пожалуйста, пришлите образец скрипки для этого.   -  person kannanc    schedule 07.09.2017

Ответы (3)


arrow_upward
0
arrow_downward

Вы должны изменить свой id текстовой области на класс или создать идентификатор текстовой области в своем пользовательском объекте (подробнее об этом ниже).

Если идентификатор, с которым вам нужно работать, находится в массиве, создайте массив объектов на основе вашего массива идентификаторов.

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

Я думаю, что у меня есть решение для вас, я сделал вам jsbin. Убедитесь, что вы нажали кнопку запустить с js, по какой-то причине он не запускается при загрузке.

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)
  }
});
person Ari    schedule 07.09.2017
comment
Этот ответ очень полезен для меня. В соответствии с моим новым требованием мне нужно загрузить значение первого параметра в поле выбора по умолчанию после запуска страницы. Ваш код ответа внутри пола мне нужно загрузить первое значение. в будущем вместо пола я буду загружать более 100 значений параметров внутри этого поля выбора. по умолчанию значение первого параметра должно быть загружено в это поле выбора. Можете ли вы отправить этот пример скрипки. - person kannanc; 11.09.2017
comment
здесь я получаю 3 формы. Мне нужно удалить 2-ю форму и другие данные 2-х форм, которые мне нужно распечатать. Как мне это сделать - person kannanc; 12.09.2017

arrow_upward
0
arrow_downward

В вашем HTML-файле вы можете вызвать ng-repeat следующим образом:

<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>

А потом в контроллере.

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;
   }
});
person Mohib Wasay    schedule 07.09.2017

arrow_upward
0
arrow_downward

вы можете использовать отслеживание по $index в ng-repat, а затем использовать индекс для моделей

<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>
person Vignesh    schedule 08.09.2017