AngularJS 表格学习笔记

AngularJS 是一个流行的 JavaScript 框架，用于前端 Web 开发。它提供了许多实用的指令，可以轻松地创建响应式 Web 应用程序。其中之一是 ng-table，用于在 AngularJS 应用程序中创建表格。

使用 ng-table 指令创建表格

首先，您需要将 ng-table 相关的脚本和样式文件添加到您的应用程序中。您可以从 ng-table 官方网站下载这些文件，或者使用 npm 安装。

htmlCopy Code
<link rel="stylesheet" href="path/to/ng-table.css">
<script src="path/to/angular.js"></script>
<script src="path/to/ng-table.js"></script>

然后，在您的 HTML 文件中，使用 ng-table 指令创建表格，并将数据绑定到该表格。

htmlCopy Code
<table ng-table="tableParams" class="table table-bordered table-hover">
  <tbody>
    <tr ng-repeat="user in $data">
      <td data-title="'ID'">{{ user.id }}</td>
      <td data-title="'Name'">{{ user.name }}</td>
      <td data-title="'Email'">{{ user.email }}</td>
    </tr>
  </tbody>
</table>

在您的控制器中，定义表格参数 tableParams，设置数据源和其他选项。

javascriptCopy Code
angular.module('myApp', ['ngTable']);

angular.module('myApp').controller('myController', function ($scope, NgTableParams) {
  $scope.users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  ];

  $scope.tableParams = new NgTableParams({
    page: 1,
    count: 10
  }, {
    dataset: $scope.users
  });
});

实例

下面是一个简单的示例，演示如何使用 ng-table 指令在 AngularJS 应用程序中创建表格。

htmlCopy Code
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <title>AngularJS ng-table Example</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdn.bootcss.com/ng-table/1.0.0/ng-table.min.css">
  <script src="//cdn.bootcss.com/angular.js/1.6.1/angular.min.js"></script>
  <script src="//cdn.bootcss.com/ng-table/1.0.0/ng-table.min.js"></script>
</head>

<body ng-controller="myController">
  <div class="container">
    <h1>Users</h1>
    <table ng-table="tableParams" class="table table-bordered table-hover">
      <tbody>
        <tr ng-repeat="user in $data">
          <td data-title="'ID'">{{ user.id }}</td>
          <td data-title="'Name'">{{ user.name }}</td>
          <td data-title="'Email'">{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    angular.module('myApp', ['ngTable']);

    angular.module('myApp').controller('myController', function ($scope, NgTableParams) {
      $scope.users = [
        { id: 1, name: 'Alice', email: 'alice@example.com' },
        { id: 2, name: 'Bob', email: 'bob@example.com' },
        { id: 3, name: 'Charlie', email: 'charlie@example.com' }
      ];

      $scope.tableParams = new NgTableParams({
        page: 1,
        count: 10
      }, {
        dataset: $scope.users
      });
    });
  </script>
</body>

</html>

这将创建一个包含三个用户的表格，其中每个用户有一个 ID、名称和电子邮件地址。

希望这篇学习笔记对 AngularJS 表格的学习有所帮助。