在Angular发布后表不会更新

-1

我在页面上显示一个表格和一个表单，但是当我使用表单提交新数据时，表格没有更新，我尝试刷新页面以查看新数据。我完全陌生，我不知道实际问题是什么。在Angular发布后表不会更新

<!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

你怎么知道有变化？你需要做一个get吗？该帖子是否包含更改？你没有添加任何东西来确保成功。 –

你有没有试过我的答案@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

在Angular发布后表不会更新

回答

相关问题