Fatal编程技术网

Javascript 表在post后未更新

javascript angularjs

Javascript 表在post后未更新,javascript,angularjs,Javascript,Angularjs,我正在页面上显示一个表和一个表单，但当我随表单提交新数据时，表没有更新，我尝试刷新页面以查看新数据。我是一个全新的角度，我不知道实际的问题是什么 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.

我正在页面上显示一个表和一个表单，但当我随表单提交新数据时，表没有更新，我尝试刷新页面以查看新数据。我是一个全新的角度，我不知道实际的问题是什么

<!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>
我的解决方案

这是我的解决方案我完全不懂角度，我对良好实践一无所知，这是一个好的解决方案吗

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();
    });
  };
}]);
您需要在本地显示它或在成功回调上再次获取列表

试试这个

$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);
    });
  };
希望有帮助

您如何知道有变化？你需要做一个测试吗？这篇文章包括这些变化吗？你没有在成功的范围内添加任何内容。你尝试过我的答案@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);
    });
  };