使用 Angular 获取所有输入数据答案

【问题标题】：Grab all input data with Angular使用 Angular 获取所有输入数据
【发布时间】：2014-09-06 18:14:36
【问题描述】：

我正在尝试使用 angular 发布输入数据，但我不知道如何从输入字段中获取数据。

这是我的 HTML：

<div ng-controller="Test">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">

    <div class="page-header"><h1>Testar</h1></div>

    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
        <div class="form-group" ng-class="{'has-error' : userForm.name.$invalid && !userForm.name.$pristine, 'has-success' : userForm.name.$valid }">
            <label>Name</label>
            <input type="text" name="name" class="form-control" ng-model="name" required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Fel namn</p>
        </div>

        <div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine, 'has-success' : userForm.username.$valid && !userForm.username.$pristine}">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.username.$error.minlength" class="help-block">För kort</p>
            <p ng-show="userForm.username.$error.maxlength" class="help-block">För långt</p>

        </div>

        <div class="form-group" ng-class="{'has-error' : userForm.email.$invalid && !userForm.email.$pristine, 'has-success' : userForm.email.$valid && !userForm.email.$pristine}">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="email">
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Ange korrekt e-post</p>
        </div>      

        <button type="submit" class="btn btn-primary">Lägg till</button>
    </form>
</div>
</div>
</div>

这是我的控制器：

as.controller('Test', function($scope, $http, $rootScope)
    {   

        $scope.submitForm = function(isValid) {
            if(isValid) 
            {   
                $http.post($rootScope.appUrl + '/nao/test', {"data": $scope.userForm})
                .success(function(data, status, headers, config) {
                    console.log(data);
                }).error(function(data, status) {

                });
            }

        };
    });

当我点击按钮时发布了一个帖子，但正在发送的数据如下所示：

{"data":{"name":{},"username":{},"email":{}}}

如何从所有输入字段中获取数据？我应该像在控制器中那样引用 userForm 吗？

【问题讨论】：

标签： javascript forms angularjs post input

【解决方案1】：

我建议再创建一个 $scope 对象 - 一开始它是空的：

$scope.form = {};

每个字段都将成为该对象的一部分：

<input type="text" name="name" class="form-control" ng-model="form.name" required>

发送后您将在对象 $scope.form 中拥有的所有字段。

jsFiddle：http://jsfiddle.net/krzysztof_safjanowski/QjNd6/

【讨论】：

欢迎您 :) 我还有一个建议——您可以禁用发送按钮，直到所有字段都有效为止。

【解决方案2】：

您在范围内有 ng-model 变量：

$scope.name
$scope.user.username
$scope.email

您可以将所有这些前缀与用户。然后使用 ajax $scope.user 而不是 $scope.userForm

发送

或

尝试发送被复制的对象：angular.copy($scope.userForm)

【讨论】：

你是什么意思？我可以将所有这些变量连接到一个对象中，然后使用 $http.post 发送包含数据的对象吗？
尝试用$http.post($rootScope.appUrl + '/nao/test', {"data": angular.copy($scope.userForm)}) 重写$http.post($rootScope.appUrl + '/nao/test', {"data": $scope.userForm}) 或者我认为更好的解决方案是：将HTML ng-model="name" 更改为ng-model="user.name" 与电子邮件输入相同，然后像这样通过$http.post 发送：$http.post($rootScope.appUrl + '/nao/test', {"data": angular.copy($scope.user)})

【解决方案3】：

你可以在你的范围内拥有一个属性，比如user。将您所有的ng-model 值设为user.SOMETHING。这样您就可以轻松发送包含所有数据的$scope.user，如{data: $scope.user }。

【讨论】：