ngTable基本示例不起作用

ngTable basic example not working

本文关键字：不起作用 ngTable      更新时间：2023-09-26

https://plnkr.co/edit/z7I2zewXwvovZ8023rHm?p=preview

请帮我处理上面plnkr中的ngTable示例。我无法显示表格，当我看到控制台日志时，模板出现了单个元素的错误。

代码：script.js

angular.module("myApp", ["ngTable"]);
angular.module('myApp')
.controller('myCtrl',function($scope,NgTableParams){
var self = this;
var data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name:"Moroni", age: 50}];
self.tableParams = new NgTableParams({}, { data: data});
});

index.html

<body ng-app="myApp" controller="myCtrl as vm">
{{8+7}}
<table ng-table="tableParams" class="table" show-filter="true">
  <tbody>
    <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>
  </tbody>
</table>

您引用脚本的顺序是错误的，script.js应该在加载ng表之后加载

<div class="container">
    <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>

工作演示

试试这个

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.2.0" data-semver="1.2.0" src="https://code.angularjs.org/1.2.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.min.css">
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
  <script>
  // Code goes here
angular.module("myApp", ["ngTable"])
.controller('myCtrl',function($scope,NgTableParams){
  var self = this;
  var data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50}];
self.tableParams = new NgTableParams({}, { dataset: data});
});
  </script>
  </head>
  <body ng-app="myApp" ng-controller="myCtrl as vm">
    {{8+7}}
    <table ng-table="vm.tableParams" class="table" show-filter="true">
      <tbody>
        <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>
      </tbody>
    </table>
  </body>
</html>
相关文章：