Question

我想为我的项目Spring和angular JS HTML5实现ng-table但是当我添加ng-table时没有任何问题。

--- App.JS ----

    angular
  .module('TimeLeaveProject', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngTable'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'DemoCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

- 控制器AngularJS ---

angular.module('TimeLeaveProject', ['ngTable'])
.controller('DemoCtrl', function($scope) {
    alert("demoCTRL"); 

    $http.get('/users/all').
    success(function(data) {
        $scope.users = data;
    });

})

--- HTML Page--

<div ng-controller="DemoCtrl" style="margin-top: 10%;text-align: center;" class="jumbotron">



    <h2>Users</h2>
    <table ng-table class="table">

   <tr ng-repeat="user in users">
        <td data-title="'Name'">{{user.username}}</td>
        <td data-title="'Age'">{{user.password}}</td>
    </tr>



   </table>

，我在index.html页面中添加了ng-table的本地链接。我没有得到任何问题，所有观点都不起作用。

Answer 1

您似乎忘记在控制器中注入$ http：

angular.module('TimeLeaveProject', ['ngTable'])
.controller('DemoCtrl', function($scope, $http) {
    alert("demoCTRL"); 

    $http.get('/users/all').
    success(function(data) {
        $scope.users = data;
    });

})

Answer 2

您可以尝试声明$ scope.users的默认值，然后查看它是否会出现？如果是，那么问题是，当您的http调用返回数据时，您的视图不会更新。

Answer 3

您是否声明了tableParams？

如果是，请确保在收到数据后声明，如下所示：

$http.get('data.json').then(function (response) { var data = response.data $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10 // count per page }, { total: data.length, // length of data getData: function ($defer, params) { $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count())); } }); });

Example plunker

Answer 4

因为我在app.js中声明了ng-table所以我不应该在控制器中声明

angular.module('TimeLeaveProject')
.controller('DemoCtrl', function($scope) {
    alert("demoCTRL"); 

    $http.get('/users/all').
    success(function(data) {
        $scope.users = data;
    });

})

Answer 5

下次尝试#ngTasty表格分页：）

http://zizzamia.com/ng-tasty/directive/table

Answer 6

使用ng-grid代替ng-table。

它提供了许多功能，如分页，过滤和行选择。

$ scope.filterOptions = {filterText：＆＃34;＆＃34;，useExternalFilter：true     }; $ scope.totalServerItems = 0; $ scope.pagingOptions = {         pageSizes：[5,10,20]，pageSize：10，currentPage：1};     $ scope.setPagingData = function（data，page，pageSize）{var   pagedData = data.slice（（第-1页）* pageSize，page * pageSize）;         $ scope.myData = pagedData; $ scope.totalServerItems = data.length;         if（！$ scope。$$ phase）{$ scope。$ apply（）; }};     $ scope.getPagedDataAsync = function（pageSize，page，searchText）{         setTimeout（function（）{var data; if（searchText）{                 var ft = searchText.toLowerCase（）;                 $ http.get（＆＃39; http://localhost:8080/getData＆＃39）。成功（                         function（largeLoad）{                             data = largeLoad.filter（function（item）{                                 返回JSON.stringify（item）.toLowerCase（）                                         .indexOf（ft）！= -1;                             }）;                             $ scope.setPagingData（data，page，pageSize）;                         }）; } else {                 $ http.get（＆＃39; http://localhost:8080/getData＆＃39）。成功（                         function（largeLoad）{                             $ scope.setPagingData（largeLoad，page，pageSize）;                         }）; ，100）; };

$ scope.getPagedDataAsync（$ scope.pagingOptions.pageSize，             $ scope.pagingOptions.currentPage）;

$ scope。$ watch（＆＃39; pagingOptions＆＃39;，function（newVal，oldVal）{if   （newVal！== oldVal＆amp;＆amp; newVal.currentPage！== oldVal.currentPage）{             $ scope.getPagedDataAsync（$ scope.pagingOptions.pageSize，                     $ scope.pagingOptions.currentPage，                     $ scope.filterOptions.filterText）; ，真实）; $ scope。$ watch（＆＃39; filterOptions＆＃39;，function（newVal，oldVal）{if   （newVal！== oldVal）{             $ scope.getPagedDataAsync（$ scope.pagingOptions.pageSize，                     $ scope.pagingOptions.currentPage，                     $ scope.filterOptions.filterText）; ，}，真实）;

$ scope.gridOptions = {data：＆＃39; myData＆＃39;，enablePaging：true，         showFooter：true，multiSelect：false，totalServerItems：   ＆＃39; totalServerItems＆＃39;，pagingOptions：$ scope.pagingOptions，         filterOptions：$ scope.filterOptions，selectedItems：[]};

ng-table angularJS的实现

6 个答案: