Question

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

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

Answer 1

您需要在本地显示它或在成功回调上再次获取列表。

只需尝试一下。

$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);
    });
  };

希望有所帮助

在Angular中发布后，表格没有更新

1 个答案: