ng-table angularJS 的实现

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页面--

<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 : "", useExternalFilter : true }; $scope.totalServerItems = 0; $scope.pagingOptions = { pageSizes : [ 5, 10, 20 ], pageSize : 10, currentPage : 1 }; $scope.setPagingData = 函数（数据，页面，pageSize）{ var pagedData = data.slice((page - 1) * pageSize, page * pageSize); $scope.myData = pagedData; $scope.totalServerItems = 数据长度； if (!$scope.$$phase) { $scope.$apply(); } }; $scope.getPagedDataAsync = function(pageSize, page, searchText) { setTimeout(function() { var data; if (searchText) { var ft = searchText.toLowerCase(); $http.get('http://localhost:8080/getData').success( 功能（大负载）{ 数据 = largeLoad.filter（功能（项目）{ 返回 JSON.stringify(item).toLowerCase() .indexOf(ft) != -1; }); $scope.setPagingData(data, page, pageSize); }); } 别的 { $http.get('http://localhost:8080/getData').success( 功能（大负载）{ $scope.setPagingData(largeLoad, page, pageSize); }); } }, 100); };

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function(newVal, oldVal) { if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }， 真的）; $scope.$watch('filterOptions', function(newVal, oldVal) { if (newVal !== oldVal) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true);

$scope.gridOptions = { data : 'myData', enablePaging : true, showFooter：真，多选：假，totalServerItems： 'totalServerItems', pagingOptions : $scope.pagingOptions, filterOptions : $scope.filterOptions, selectedItems : [] };