Question

考虑到我有一个用户列表要添加到我的系统中，我不想一个一个地完成这个过程。然后我想看一个用户表单（名称，电子邮件，密码字段），在行的末尾我看到＆＃34;添加另一行＆＃34;按钮。

点击＆＃34;添加另一行＆＃34;按钮，将在现有用户表单之后添加一个用户表单。

如何在AngularJS中仅通过一个POST请求发送多个用户？

Answer 1

您的控制器中应该有一组用户，每次按下＆＃34;添加另一个用户＆＃34;您可以向阵列添加新用户。

控制器中的代码：

    $scope.users = [{ name: "1" , email: "email1", password:"pas1" }, { name: "2" , email: "email2", password:"pas2"}];;

$scope.addUser = function () {

    $scope.users.push({ name: "" , email: "", password:""  });
};

现在，在你的html中将列出一个用户绑定在你的数组中的列表。每次添加一个新用户都会在html中添加一个新行，其中视图绑定了添加的新用户的参数。

 <form ng-submit="submit()">
    <div class="container">
        <div class="col-md-5">
            <li class="list-group-item col-xs-12" data-ng-repeat="user in users">
                <input type="text" class="form-control" placeholder="Username" ng-model="user.name">
                <input type="text" class="form-control" placeholder="Password" ng-model="user.password">
                <input type="text" class="form-control" placeholder="Email" ng-model="user.email">
            </li>
            <button class="col-xs-12" ng-click="addUser()">Add Another User</button>

    </div>


</form>

将一个函数提交添加到您的控制器，以您希望用户阵列的方式提交。希望它有所帮助。

Answer 2

这是一些非常基本的Angular内容。这是一个例子：

<form name="usersForm" ng-submit="save()">
    <div ng-repeat="user in users">
        <label>Name:</label>
        <input type="text" ng-model="user.name" required />
        <br/>
        <label>Email:</label>
        <input type="email" ng-model="user.email" required />
        <hr/>
    </div>
    <button ng-click="newUser($event)">Add another one</button>

    <input type="submit" value="Save" ng-disabled="usersForm.$invalid || !users.length" />
</form>

一个处理数据的控制器：

$scope.users = [];

$scope.newUser = function($event){
    // prevent submission
    $event.preventDefault();
    $scope.users.push({});
}

$scope.save = function(){
    console.log($scope.users);  
    // myService.saveUsers($scope.users);
    // $http.post("someUrlWhichHandlesListOfUsers", { users: $scope.users });
}

JSFIDDLE

Answer 3

您可以使用$http.post()发布任何内容。有什么不行吗？鉴于，您的用户存储在$ scope.users中，在您的“保存”方法中，您只需编写：

$http.post('/someUrl', $scope.users).
  success(function(data, status, headers, config) {
    console.log('POSTed!');
  }).
  error(function(data, status, headers, config) {
    console.log('Failed!');
  });

您的JSON对象将被发送到服务器。

从相同模型AngularJS添加多行

3 个答案: