那些遇到过的问题

AngularJS ngTable延迟显示ajax数据

Mik*_*ton 6 javascript ajax html5 json angularjs

背景

我正在努力使用ngTable的细节.我浏览了ngTable ajax演示并试图尽可能合理地遵循这个例子; 然而,我需要从其中的部分偏离ngTable AJAX演示限定ngResource内嵌控制器.

问题

我用ngTable过滤器成功构建了ngTable ; 我的webapp在这里(也看到了plunker).这是一个ngTable:

该JSON REST服务加载正确,并且过滤器工作.但是,我的问题是表格是空白的,直到我在"过滤器"字段中键入内容(请参阅下面的屏幕截图之前和之后).

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

  • 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中被破坏了...我不知道为什么,但我真的不关心IE; 这个webapp不会是一个公共Web服务.

问题

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

注意:源代码位于页面底部...我为它构建了一个plunker.

结束笔记

注1 眼尖的读者可能会注意到,我使用的是[[和]]我AngularJS形式,而不是默认大括号分隔符.我这样做是因为我正在使用带有Jinja的Flask(它的模板引擎也需要双花括号)..

截屏

之前:加载时页面是空白的:

空白ngTable

AFTER:但是,如果我在过滤器中输入任何字符,ngTable会显示数据:

带过滤器的ngTable

更新:显式问题解决,感谢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>
Run Code Online (Sandbox Code Playgroud)

破解的演示源代码

<!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>
Run Code Online (Sandbox Code Playgroud)

数据(我将在问题得到解答后删除演示json REST服务):

[{"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"}]
Run Code Online (Sandbox Code Playgroud)

我正在使用...

我已经尝试过了什么

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

  • 删除jQuery
  • 删除Yahoo PureCSS
  • 更改ngTable过滤器上的默认值
  • 从页面中删除所有其他javascript(这实际上在同一页面上有多个AngularJS控制器,但删除了所有其他的,希望它只是一个简单的脚本冲突.
  • 在构建ngTable的AngularJS控制器中进行了几次实验,如果我修改了这个(读取:抓住吸管).
  • null正如Sander Elias所建议的那样,尝试在我的过滤器中使用而不是空字符串

如果我内联<script>块中的json数据而不是进行ajax json REST服务调用,则表在页面加载时正确填充,但这实际上没有帮助,因为数据会不时更改.

lib*_*b3d 4

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

键入一个字符似乎回忆getData起来，这一次，解决了data。这可以解释在键入第一个键时显示的数据。

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

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

归档时间：

查看次数：

6489 次

最近记录：

9 年，6 月 前
相关归档
如何使用jq从JSON获取密钥名称 103
从HTTP响应中获取JSON对象 64
设置JavaScript变量= null,还是保留undefined？ 45
AngularJS和处理404错误 45
Yahoo Finance所有货币都引用API文档 34
哪个更好？为什么？RaphaelJS或HTML5 Canvas？ 14
在鼠标保持时连续递增值 9
ExtJS还是SmartClient？ 6
对Action方法的两个并行ajax请求排队,为什么？ 6
如何将触摸事件添加到HTML5 Canvas色轮？ 5
难疑归档
如何有效地配对袜子？ 3850
"git add -A"和"git add"之间的区别. 2788
如何测试空的JavaScript对象？ 2730
如何格式化JavaScript日期 1945
数据绑定如何在AngularJS中运行？ 1924
类型检查:typeof,GetType还是？ 1435
Markdown中的评论 1277
application/x-www-form-urlencoded或multipart/form-data？ 1268
获取数据库中所有表的大小 1180
为什么有两种方法可以在Git中取消暂存文件？ 1109