AngularJS 多功能 table - 从哪里开始

Question

我是 AngularJS 的新手，我想了解更多。我能够使用 JBoss Forge2 创建一个带有 AngularJS 前端的 Java EE 项目。然而，它创建了一个非常基本的、非直观的 GUI（怎么可能不）。

我想做的是创建（或找到）一个 table，我可以在其中显示数据集合。

table应该有：

动态的列数（等于我想显示其列表的对象）
每列
每列搜索过滤器
分页选项

我应该从哪里开始寻找，或者这样的 table 已经存在？我已经了解了一点 AngularJS。

Answer 1

查看 Angular UI Grid，它仍在开发中，但可以当前形式使用。

网格有许多有用的功能，包括：

还有更多...

这是一个使用 Angular UI-Grid

的网格示例

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {

  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
];
}]);

<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

AngularJS 多功能 table - 从哪里开始

AngularJS multifunctional table - where to start

gridview

tabular

angularjs