-1
ページにテーブルとフォームを表示していますが、フォームで新しいデータを送信すると、テーブルが更新されていないため、ページを更新して新しいデータを表示しようとしました。私は全く新しい角度にあり、私は実際の問題が何であるか分かりません。角度のポストの後にテーブルが更新されない
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<body>
<div ng-app="myApp">
<div class="container">
<div ng-controller="getCtrl">
<table class="table table-stripped">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr ng-repeat = "user in users">
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
</tr>
</table>
<div class="row" >
<form name="userForm" ng-submit="formSubmit()">
<div class="form-group">
<label>Nombre</label>
<input type="text" name="name" class="form-control" ng-model="user.name">
<span ng-show="errorName">{{errorName}}</span>
</div>
<div class="form-group">
<label>Apellido</label>
<input type="text" name="lastName" class="form-control" ng-model="user.lastName">
<span ng-show="errorName">{{errorName}}</span>
</div>
<div style="text-align:center">
<button type="submit" class="btn btn-primary" >Insertar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
とjsがこれは私が完全に、私は良いプラクティスについて何も知らないしていない角度でのnoobだ私の解決策である、それはある
私のソリューション
var app = angular.module('myApp',[]);
app.controller('getCtrl',['$scope','$http',function($scope,$http){
$http.get("http://127.0.0.1:3000/api/Users")
.then(function(response){
$scope.users = response.data;
});
$scope.errorName =false;
$scope.formSubmit = function(){
$http.post("http://127.0.0.1:3000/api/Users",$scope.user)
.then(function(response){
});
};
}]);
ファイル良い解決策？
var app = angular.module('myApp',[]);
app.controller('getCtrl',['$scope','$http',function($scope,$http){
$scope.makeGetRequest = function(){
$scope.users = {};
$http.get("http://127.0.0.1:3000/api/Users")
.then(function(response){
$scope.users = response.data;
});
}
$scope.errorName =false;
$scope.makeGetRequest();
$scope.formSubmit = function(){
$http.post("http://127.0.0.1:3000/api/Users",$scope.user)
.then(function(response){
$scope.makeGetRequest();
});
};
}]);
お役に立てば幸いですか！あなたは取得する必要がありますか？投稿には変更が含まれていますか？あなたは成功の範囲に何も追加していません。 –
あなたは私の答えを試しましたか？ –