Question

我正在尝试创建一个表单，在单击提交时调用将发布到php页面（运行查询）的函数，然后在页面上显示这些结果。

如果我在加载时在我的控制器中调用该函数，我得到了我的预期结果（数据在html表中以模态显示）。但是，如果我在点击提交时调用该功能。我可以记录数据结果，但它不会显示在我的页面上。

  $scope.report = {};
  var url = "";
  // calling our submit function.
  $scope.submitForm = function() {

      $http.post('url.php').success(function(data) {
          // Stored the returned data into scope 
          $scope.names = data;
          console.log(data);
          $('#myModal').modal();
      });
  };

<button type = "button" class="btn btn-success" ng-click="submitForm()" >Submit Request</button>
<div class="modal fade" id="myModal" role="dialog" >
   <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" >
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
         </div>
         <div class="modal-body">
            <table class="table table-striped table-bordered">
               <tr>
                  <th>Name</th>
               </tr>
               <tr ng-repeat="name in names | filter:search_query">
                  <td><span>{{name.first}}</span></td>
               </tr>
            </table>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

Answer 1

尝试在打开模式之前添加一个小$timeout（不要忘记向控制器注入$timeout）：

$scope.submitForm = function() {

      $http.post('url.php').success(function(data) {
          // Stored the returned data into scope 
          $scope.names = data;
          console.log(data);

          $timeout(function () {
              $('#myModal').modal();
          },250);
      });
  };

Angularjs：能够记录数据但无法显示

1 个答案: