Question

我正在尝试为ngTable运行简单的代码，但它只显示标题而没有显示数据。我正在使用ngTable的最新文档。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <div ng-app="myApp" ng-controller="ctrl">
        <table ng-table="vm.tableParams" class="table" show-filter="true">
            <tr ng-repeat="user in $data">
                <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                    {{user.name}}</td>
                <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
                    {{user.age}}</td>
            </tr>
        </table>
    </div>
</body>

</html>
<script type="text/javascript">
angular.module("myApp", ["ngTable"])
    .controller('ctrl', ['NgTableParams', function(NgTableParams) {
        var vm = this;
        var data = [{
            name: "Moroni",
            age: 50
        }, {
            name: "Moroni",
            age: 50
        }, {
            name: "Moroni",
            age: 50
        }];
        vm.tableParams = new NgTableParams({}, {
            dataset: data
        });

    }])
</script>

Answer 1

您正在将控制器和控制器混合为语法，

HTML

<div ng-controller="ctrl">
      <table ng-table="tableParams" class="table" show-filter="true">
        <tbody>
          <tr ng-repeat="row in $data">
            <td data-title="'Name'"  sortable="'name'">{{ row.name }}</td>
            <td data-title="'Age'"  sortable="'age'">{{ row.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

控制器

var app = angular.module('ngTableApp', ['ngTable'])
  .controller('ctrl', function($scope, $filter, $q, NgTableParams) {
    var data = [{
      name: "Moroni",
      age: 50
    }, {
      name: "Moroni",
      age: 50
    }, {
      name: "Moroni",
      age: 50
    }];
    $scope.tableParams = new NgTableParams({
      page: 1,
      count: 10
    }, {
      data: data
    });

  })

<强> DEMO

Answer 2

问题在于您的数据变量，您正在视图中访问。

angular.module("myApp", ["ngTable"])
    .controller('ctrl', ['NgTableParams','$scope', function(NgTableParams,$scope) {
        var vm = this;
        var data = [{
            name: "Moroni1",
            age: 50
        }, {
            name: "Moroni2",
            age: 50
        }, {
            name: "Moroni3",
            age: 50
        }];
      $scope.data = data;
        vm.tableParams = new NgTableParams({}, {
            dataset: data
        });

    }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <div ng-app="myApp" ng-controller="ctrl">
        <table ng-table="vm.tableParams" class="table" show-filter="true">
            <tr ng-repeat="user in data">
                <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                    {{user.name}}</td>
                <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
                    {{user.age}}</td>
            </tr>
        </table>
    </div>
</body>

</html>

NgTable不显示数据，仅显示标题

2 个答案: