Question

我有以下代码发出PUT请求并显示从表中的服务器返回的已修改数据。现在，什么时候页面加载后，将显示一个空表，直到单击该按钮。

我需要的是在点击按钮之前隐藏表格。怎么样我能做到这一点吗？

<div ng-app="myApp" ng-controller="formController">
<script type="text/ng-template" id="tableTemplate.html">
 <table>
    <thead>
        <tr>
            <th>id</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in names">
            <td>{{ x.id }}</td>
            <td>{{ x.email }}</td>
            <tr>
    </tbody>
 </table>
 </script>

 <form ng-submit="processForm()">id :
    <input type="text" name="id" ng-model="formData.id">email :
    <input type="email" name="email" ng-model="formData.email">
    <input type="submit" value="go">
 </form>
 <div my-directive></div>

</div>

<script>
var app = angular.module('myApp',[]);

app.directive('myDirective', function() {
    return {
      replace: true,
      restrict: 'EA', 
      templateUrl: 'tableTemplate.html'
    }
  });

app.controller("formController", function($scope,$http) {
  $scope.formData = {};
  $scope.processForm = function(){
     // PUT /users/id
     var url = 'http://www.example.com/users/' + $scope.formData.id;
     var data = '{"email":"' + $scope.formData.email}';
     $http({method: 'PUT', url: url, data: data}).success(function(response){
        $scope.names = response;
     });
   }
 });
</script>

Answer 1

在HTML中：

<table ng-show="formSubmitted">

在控制器$http success()功能中：

$scope.formSubmitted = true;

AngularJS - 隐藏表格模板，直到使用自定义指令提交表单

1 个答案: