Javascript ng表angularJS的实现

我想为我的项目Spring和angular JS HTML5实现ng表，但当我添加ng表时，问题并没有解决

---App.JS----

--控制器AngularJS--

---HTML页面--

使用者
{{user.username}
{{user.password}}

---

我在index.html页面中添加了ng表的本地链接。问题是我什么都没有，所有视图都不工作。

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

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

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

})

---

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

您是否声明了您的

表参数

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

$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()));
        }
    });

});

---

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

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

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

})

下次尝试“美味的表格分页：）

---

使用ng网格而不是ng表格

它提供了许多功能，如分页、筛选和行选择

$scope.filterOptions={filterText:，useExternalFilter:true }; $scope.totalServerItems=0$scope.pagingOptions={ 页面大小：[5,10,20]，页面大小：10，当前页面：1}； $scope.setPagingData=函数（数据、页面、页面大小）{var pagedData=data.slice（（第1页）*页面大小，页面*页面大小）； $scope.myData=pagedData；$scope.totalServerItems=data.length； 如果（！$scope.$$phase）{$scope.$apply（）；}}； $scope.getPagedDataAsync=函数（页面大小、页面、搜索文本）{ setTimeout（函数（）{var data；if（searchText）{ var ft=searchText.toLowerCase（）； $http.get（''）.success( 功能（大负载）{ 数据=大负荷过滤器（功能（项目）{ 返回JSON.stringify（item.toLowerCase（）） .indexOf（ft）！=-1； }); $scope.setPagingData（数据、页面、页面大小）； })其他的{ $http.get（''）.success( 功能（大负载）{ $scope.setPagingData（大负载、页面、页面大小）； }); } }, 100); };

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

$scope.$watch（'pagingOptions'，函数（newVal，oldVal）{if （newVal！==oldVal&&newVal.currentPage！==oldVal.currentPage）{ $scope.getPagedDataAsync（$scope.paginOptions.pageSize， $scope.pagingOptions.currentPage， $scope.filterOptions.filterText）；}}，true）$作用域.$watch（'filterOptions'，函数（newVal，oldVal）{if （newVal！==oldVal）{ $scope.getPagedDataAsync（$scope.paginOptions.pageSize， $scope.pagingOptions.currentPage， $scope.filterOptions.filterText）；}}，true）

$scope.gridOptions={data:'myData'，enablePaging:true， showFooter:true，multiSelect:false，totalServerItems: “totalServerItems”，分页选项：$scope.pagingOptions， filterOptions:$scope.filterOptions，选择EdItems:[]}

---

您是否检查了http.get.success是否返回了您期望的结果？是的，我以前使用过HTML5表，没有问题，您能将其与我在这里所做的进行比较吗，要了解不同之处，javascript控制台中没有显示任何错误，而且其他页面也不工作，因此我认为问题出在app.js中。我检查了控制器中的问题。您确定，作为参考，请查看此处。你能在plunker中添加代码吗？你能给出plunker的链接吗？它更容易调试，你可以检查这个例子，我没有使用tableParams，它在@Passtispinose工作，所以。。。你的问题解决了吗？顺便说一句，我建议您使用tableParams，这将使您能够进行排序、筛选、分组、分页……我将使用它，感谢所有人解决了问题。

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

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

})

$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()));
        }
    });

});

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

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

})