Question

我尝试在POST操作后显示我输入的数据。但它不起作用。我怎么能做到这一点？

这是我的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>
    <table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Namn</th>
            <th>Efternamn</th>
            <th>E-post</th>
         </tr>
    </thead>
        <tr ng-repeat="info in test.data"><td>{{info.namn}}</td><td>{{info.efternamn}}</td><td>{{info.email}}</td></tr>
    </table>

    <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="form.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="form.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="form.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>

这是我的控制器：

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

        $http.get($rootScope.appUrl + '/nao/test/test')
            .success(function(data, status, headers, config) {
                $scope.test = data;
        });

        $scope.form = {};

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

                })
            }
        };
    });

如何在提交后查看我在输入字段中输入的数据？正如你所看到的，我试图设置$ scope.test = data，但这不起作用。

Answer 1

请参见此处：http://jsbin.com/gagiwo/1/edit?js,output

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

                $http.get($rootScope.appUrl + '/nao/test/test')
                    .success(function(data, status, headers, config) {
                        $scope.test = data;
                });

                $scope.form = {};

  $scope.submitForm = function(isValid) {
          if(isValid) 
            {   
              $http.post($rootScope.appUrl + '/nao/test', $scope.form)
                .success(function(data, status, headers, config) {
                  console.log(data); <-- data is object returned from server
                   $scope.datePosted = $scope.form; <-- $scope.form is your object posted to server

                }).error(function(data, status) {

                  $scope.datePosted =$scope.form;
                });


            }
        };
            });

Answer 2

您需要为$ http post调用创建一个工厂方法，该方法会在您注入工厂时将数据返回给控制器。

angular.module('your factory module', [])
    .factory('testFactory', function($http) {
        return {
            urMethod: function(callback) {
                return $http({
                   <ur http call parameters>
                }).
                success(function(data) {
                    callback(data);
                });                 
            }
        };

    });

并在您的控制器中：

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

        $http.get($rootScope.appUrl + '/nao/test/test')
            .success(function(data, status, headers, config) {
                $scope.test = data;
        });

        $scope.form = {};

        $scope.submitForm = function(isValid) {
            if(isValid) 
            {   
                    testFactory.urMethod(function(data){
                       $scope.test = data;
            });
            }
        };
    }]);

使用AngularJS在POST后显示数据

2 个答案: