1

我正在使用 AngularJS 动态表单。根据我的用户 ID 值，我使用 ng-repeat 生成了具有相同模型名称的多个表单字段。由于这个 ng-repeat，我无法获得这个输入模型值。在此示例中，我使用的是静态用户 ID 数据。

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

我的js代码

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

}
});

我需要将对象数组发送到我的服务器。我的用户 ID 也是动态的，它有 100 多个数据。如何获取每个数据字段模型值？以及如何将这些模型数据转换为对象数组，例如我的 sampleserver 数据？

我期待我的最终输出数据是这样的

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

3 回答 3

0

您可以在 ng-repat 中使用 $index 跟踪，然后将索引用于模型

<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>
于 2017-09-08T05:32:55.663 回答
0

您应该将您的 textarea id更改为一个类或在您的用户对象中创建一个 textarea id（更多内容见下文）。

如果您必须使用的 id 在一个数组中，则根据您的 ids 数组创建一个对象数组。

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)
  }
});
于 2017-09-07T20:44:24.320 回答
0

在您的 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;
   }
});
于 2017-09-07T21:51:49.220 回答