[英]Show data after POST with AngularJS
Im trying show the data that I have enterd, after an POST-action. 我试图在执行POST操作后显示我输入的数据。 But it does not work. 但这行不通。 How can I accomplish this? 我该怎么做?
Here is my HTML: 这是我的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>
Here is my Controller: 这是我的控制器:
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) {
})
}
};
});
How can I view the data that I entered in the input fields, after the submit? 提交后,如何查看在输入字段中输入的数据? As you can see, I've tried to set $scope.test = data, but that don't work. 如您所见,我尝试设置$ scope.test = data,但这不起作用。
please see here : http://jsbin.com/gagiwo/1/edit?js,output 请在这里查看: http : //jsbin.com/gagiwo/1/edit?js,输出
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;
});
}
};
});
You need to create a factory method for your $http post call which will return the data to the controller when you inject the factory. 您需要为$ http post调用创建一个factory方法,该方法将在注入工厂时将数据返回到控制器。
angular.module('your factory module', [])
.factory('testFactory', function($http) {
return {
urMethod: function(callback) {
return $http({
<ur http call parameters>
}).
success(function(data) {
callback(data);
});
}
};
});
and in your controller: 并在您的控制器中:
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;
});
}
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.