javascript - AngularJS ngTable延迟显示ajax数据

标签 javascript ajax json html angularjs

背景

我正在为使用 ngTable 的细节而苦苦挣扎.我浏览了 ngTable ajax demo并尽可能合理地效仿这个例子；但是，我需要偏离 ngTable ajax demo 所在的部分定义一个 ngResource与 Controller 内联。

问题

我成功构建了一个 ngTable与 ngTable filters ;我的网络应用程序是 here (另见 plunker )。这是一个 ngTable，它:

json REST service加载正确，过滤器工作。但是，我的问题是，在我在过滤器字段中键入内容之前，表格是空白的(参见下面的 before 和 after 屏幕截图)。

我试过的所有浏览器都存在这个问题:

  • Firefox 27.0.1 (Windows Vista)
  • Chrome 版本 33.0.1750.146 (Windows Vista)
  • Chrome 版本 32.0.1700.123(Linux - Debian 7.0 Wheezy)

我知道 Internet Exploder 9 中的 webapp 坏了...我不知道为什么，但我真的不关心 IE；此网络应用不会成为公共(public)网络服务。

问题

  • 如何在我第一次加载时填充表格 my webapp (不在过滤框中输入任何内容)？
  • 为什么现在坏了？

注意:源代码在页面底部……我建了一个 plunker 为之。

尾注

注意1眼尖的读者可能会注意到我用的是[[和 ]]在我的 AngularJS形式而不是默认的花括号定界符。我这样做是因为我正在使用 Flask与 Jinja (它的模板引擎还需要双花括号)。。

屏幕截图

之前:加载时页面为空白:

blank ngTable

之后:但是，如果我在过滤器中键入任何字符，ngTable显示数据:

ngTable with filter

更新:明确的问题解决，感谢 lib3d 的回答

<script type="text/javascript">

    "use strict";
    // Set up an ngResource service to make HTTP GET / POST / DELETE calls
    var Api = angular.module("api_main", ["ngResource"]);
    Api.factory("restDemo", function ($resource) {
        // http://www.masnun.com/2013/08/28/rest-access-in-angularjs-using-ngresource.html
        return $resource("http://demo.pennington.net/demo/api/v1/data01", {}, {});
    });

    // Loosely based on this ngTable demo...
    //       http://bazalt-cms.com/ng-table/example/6
    var App2 = angular.module('taskTable', ['ngRoute', 'api_main', 
        'ngTable']);
    // Need to change AngularJS symbols when using flask + Jinja
    App2.config(function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

    App2.controller('tableCntl', function($scope, $filter, restDemo, ngTableParams) {


        var data = restDemo.query(); // HTTP GET for REST service


        // Set up task table parameters
        /* Lib3d's fix (i.e. data.$promise) is below */
        data.$promise.then(function (data) {
            /* the data is here, work with it */
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                total: data.length,
                sorting: {
                    Column01: 'asc',
                    Column02: 'asc',
                    Column03: 'asc'
                },
                filter: {
                    Column01: "",
                    Column02: "",
                    Column03: "",
                }
            }, {
                getData: function($defer, params) {

                    // Filtering
                    var orderedData = params.filter() ?
                           $filter('filter')(data, params.filter()) :
                           data;

                    // Sorting
                    orderedData = params.sorting() ?
                        $filter('orderBy')(orderedData, params.orderBy()) :
                        orderedData;
                   $defer.resolve(orderedData.slice((params.page() - 1) * params.count(),  params.page() * params.count()));

                    /* set total for recalc pagination */
                    params.total(orderedData.length);

                    // This shouldn't be required, but keeping here in case
                    //if(!$scope.$$phase) {
                    //    $scope.$apply();
                    //}
                }
            });
        });
    });
</script>

损坏的演示源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.1/ng-table.css">
    <!--
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        padding-top: 30px; /* 30px pad at the top of screen */
      }
    </style>
    <!-- Fix up title -->
    <title>DATA DEMO</title>
  </head>
  <body>
    <div class="pure-g">
    </div>
    <!-- Static navbar -->
    <div class="pure-g">
      <div id="menu" class="pure-u">
        <div class="pure-menu pure-menu-horizontal pure-menu-open">
          <ul>
            <li><a href="#">Add Demo</a></li>
            <li class="active"><a href="#">List Demo</a></li>
            <li><a href="#">List Projects</a></li>
            <li>
                <a href="/login">Login</a>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <!--- insert stuff here -->
  <div id="Tasks" ng-app="taskTable" ng-controller="tableCntl">
    <p><strong>Filter:</strong> [[tableParams.filter()|json]]
    <table ng-table="tableParams" show-filter="true" class="table">
        <tbody>
          <tr ng-repeat="words in $data">
              <td data-title="'Column01'" sortable="Column01" filter="{'Column01': 'text'}">
                  [[words.Column01]]
              </td>
              <td data-title="'Column02'" sortable="Column02" filter="{'Column02': 'text'}">
                  [[words.Column02]]
              </td>
              <td data-title="'Column03'" sortable="Column03" filter="{'Column03': 'text'}">
                  [[words.Column03]]
              </td>
          </tr>
        </tbody>
    </table>
  </div>
  </body>
  <!-- insert JS at the bottom of the page -->
  <footer>
    <!-- all flash messages are processed here -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-resource.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/angular.ngtable/0.3.1/ng-table.js"></script>
    <!--
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
    -->

    <script type="text/javascript">

        "use strict";
        // Set up an ngResource service to make HTTP GET / POST / DELETE calls
        var Api = angular.module("api_main", ["ngResource"]);
        Api.factory("restDemo", function ($resource) {
            // http://www.masnun.com/2013/08/28/rest-access-in-angularjs-using-ngresource.html
            return $resource("http://demo.pennington.net/demo/api/v1/data01", {}, {});
        });

        // Loosely based on this ngTable demo...
        //       http://bazalt-cms.com/ng-table/example/6
        var App2 = angular.module('taskTable', ['ngRoute', 'api_main', 
            'ngTable']);
        // Need to change AngularJS symbols when using flask + Jinja
        App2.config(function($interpolateProvider) {
            $interpolateProvider.startSymbol('[[');
            $interpolateProvider.endSymbol(']]');
        });

        App2.controller('tableCntl', function($scope, $filter, restDemo, ngTableParams) {


            var data = restDemo.query(); // HTTP GET for REST service
            // Set up task table parameters
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                total: data.length,
                sorting: {
                    Column01: 'asc',
                    Column02: 'asc',
                    Column03: 'asc'
                },
                filter: {
                    Column01: "",
                    Column02: "",
                    Column03: "",
                }
            }, {
                getData: function($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.filter() ?
                           $filter('filter')(data, params.filter()) :
                           data;

                    //sorting
                    orderedData = params.sorting() ?
                        $filter('orderBy')(orderedData, params.orderBy()) :
                        orderedData;

                    // store filtered data as $scope.words
                    $scope.words = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    params.total(orderedData.length); // set total for recalc pagination
                    $defer.resolve($scope.words);
                    $defer.resolve(data.result);
                }
            });
        });
    </script>
    <!-- Custom footer content here -->

  </footer>
</html>

数据(回答问题后我会删除demo json REST service):

[{"Column02": "shines", "Column03": "paycheck", "Column01": "days"}, 
 {"Column02": "erg", "Column03": "gag", "Column01": "emotion's"}, 
 {"Column02": "Chris", "Column03": "Poznan's", "Column01": "treasure's"}, 
 {"Column02": "presentiments", "Column03": "Austerlitz's", "Column01": "suppression's"}, 
 {"Column02": "leopards", "Column03": "slosh's", "Column01": "upturned"}, 
 {"Column02": "uncaring", "Column03": "cosmetics", "Column01": "symmetry"}, 
 {"Column02": "guesser's", "Column03": "lapped", "Column01": "retrogressed"},
 {"Column02": "Kurd", "Column03": "wryest", "Column01": "cicadas"}, 
 {"Column02": "cantered", "Column03": "encrustation's", "Column01": "beyond"}, 
 {"Column02": "flybys", "Column03": "poesying", "Column01": "physician's"}, 
 {"Column02": "fun", "Column03": "Delaware's", "Column01": "destructiveness"}, 
 {"Column02": "scramblers", "Column03": "gestates", "Column01": "acoustics"}, 
 {"Column02": "redesigning", "Column03": "cubits", "Column01": "Enterprise"}, 
 {"Column02": "phonograph's", "Column03": "haloed", "Column01": "upsurge"}, 
 {"Column02": "Michelson", "Column03": "Pansy", "Column01": "McCoys"}, 
 {"Column02": "adieu", "Column03": "Dido", "Column01": "ligaturing"}, 
 {"Column02": "osprey's", "Column03": "expressiveness's", "Column01": "Starr"}, 
 {"Column02": "patent's", "Column03": "therapeutically", "Column01": "brasher"}, 
 {"Column02": "enfranchise", "Column03": "idolized", "Column01": "criticized"}, 
 {"Column02": "Angel", "Column03": "wryest", "Column01": "drum"}, 
 {"Column02": "overstaying", "Column03": "tranquillized", "Column01": "alacrity"}, 
 {"Column02": "underachievers", "Column03": "minority", "Column01": "Brigham's"}, 
 {"Column02": "lobotomy's", "Column03": "filament's", "Column01": "scoldings"}, 
 {"Column02": "original", "Column03": "muskmelon's", "Column01": "financially"}, 
 {"Column02": "flagon's", "Column03": "vapidness", "Column01": "Klaus's"}, 
 {"Column02": "dhotis", "Column03": "fleeter", "Column01": "jugulars"}, 
 {"Column02": "shanty", "Column03": "profiteer's", "Column01": "disbelief"}, 
 {"Column02": "bureaucracies", "Column03": "flashier", "Column01": "refrigerating"}, 
 {"Column02": "betrayal's", "Column03": "hindquarters", "Column01": "faze"}, 
 {"Column02": "Poland", "Column03": "cobbler", "Column01": "kidnaped"}]

我正在使用...

我已经尝试过的

这些事情似乎都没有对问题产生影响:

  • 删除 jQuery
  • 删除 Yahoo PureCSS
  • 更改 ngTable Filters 上的默认值
  • 从页面中删除所有其他 javascript(这实际上在同一页面上有多个 AngularJS Controller ，但删除了所有其他的，希望这只是一个简单的脚本冲突。
  • 在构建 ngTable 的 AngularJS Controller 中进行了多项实验what-if-I-modify-this(读作:捕获吸管)。
  • 尝试使用 null而不是我的过滤器中的空字符串，如 suggested by Sander Elias

如果我在 <script> 中内联 json 数据阻止而不是制作 ajax json REST service调用时，表格会在页面加载时正确填充，但这确实无济于事，因为数据会不时更改。

最佳答案

您的数据 是异步获取的，但您是同步使用的。然后第一个 getData 调用使用未解析的数据，这意味着根本没有数据。

键入一个字符似乎会想起getData，这次是解析data。这将解释在键入第一个键时显示的数据。

要等待获取数据，请在这样的回调中实现 ngTable 调用:

/* there, data are not fetched */
data.$promise.then(function (data) {
    /* there data are fetched, work with it */
});

关于javascript - AngularJS ngTable延迟显示ajax数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22429534/

上一篇：c# - 单击按钮后为我的表选择一个类？ (HTML 表格)

下一篇：html - 如何在可变宽度的父级(多行)中均匀地间隔元素？

相关文章：

javascript - 使用 Ajax 将数组传递给 PHP 脚本会导致空帖子

php - ajax/json 输出必须是其他格式

json - 如何在 swift 4 中解析 json 数组中的数组

Java Restful服务响应过滤

javascript - Cypress 命令日志 chop

javascript - 在 JavaScript 中获取 "To the power off"的准确值

javascript - JS->对输入进行表单验证。使用for循环获取所有输入索引

javascript - 每天在 5 :00 AM using firebase javascript 清除 firebase 数据库值

javascript - jquery通过ajax和animate加载内容

ajax - <h :inputText value not updating

©2024 IT工具网  联系我们