Question

我尝试使用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吗？

Answer 1

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

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

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

发送

或

尝试发送复制的对象：angular.copy（$ scope.userForm）

Answer 2

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

Answer 3

我建议再创建一个$ 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/

使用Angular获取所有输入数据

3 个答案: