게시물이 각도 업데이트 후 업데이트되지 않습니다.

-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이 나는 완전히, 내가 모범 사례에 대해 아무것도 몰라 각도에 멍청한 놈이야 내 솔루션이며, 그것은이다

내 솔루션

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(); }); }; }]);

출처

2016-07-22 AFS

이 어떻게 변화가 알고 도움이되기를 바랍니다? 너는 할 필요가 있니? 게시물에 변경 사항이 포함되어 있습니까? 당신은 성공의 범위에 아무것도 추가하지 않습니다. –

대답을 @AFS 해 보셨습니까? –

성공 콜백에서 로컬로 표시하거나 목록을 다시 가져와야합니다.

간단히 사용해보십시오.

$scope.formSubmit = function(){ 
    $http.post("http://127.0.0.1:3000/api/Users",$scope.user) 
    .then(function(response){ 
     //to update the local array with the posted object 
     $scope.users.push($scope.user); 
    }); 
    };

는

출처

2016-07-22 12:05:54

게시물이 각도 업데이트 후 업데이트되지 않습니다.

답변

관련 문제