ng-table を試してみた

AngularJS

昨日言ってた ng-table を軽く試してみました。
れうんこ過ぎるのでなにか無いかと探してみたら ng-table なるものを見つけた。

[ソース]

<html ng-app='MyApp'>
  <head>
    <title>
      test
    </title>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js'></script>
    <script src='http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js'></script>
    <link href='http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css' rel='stylesheet'>
    <link href='http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css' rel='stylesheet'>
    <link href='stylesheets/style.css' rel='stylesheet'>
    <script language='javascript'>
      angular.module("MyApp", ["ngTable"]);
    </script>
  </head>
  <body>
    <style>
      .ng-table {
        border: 1px solid #000; }
    </style>
    <script>
      var ngTableDemoCtrl = function ($scope) {
      $scope.users = [{name: "Moroni", age: 50},
                      {name: "Tiancum", age: 43},
                      {name: "Jacob", age: 27},
                      {name: "Nephi", age: 29},
                      {name: "Enos", age: 34}];
      };
    </script>
    <div class='container'>
      <br>
      <div ng-controller='ngTableDemoCtrl'>
        <table class='table' ng-table=''>
          <tr ng-repeat='user in users'>
            <td data-title="'名前'">
              {{ user.name }}
            </td>
            <td data-title="'年齢'">
              {{ user.age }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

[出力]

http://gyazo.com/a8c7d355525b727b49bcd46186f0eb9d.png


こんな感じ。
実際に table を出力しているコードは

<table class='table' ng-table=''>
  <tr ng-repeat='user in users'>
    <td data-title="'名前'">
      {{ user.name }}
    </td>
    <td data-title="'年齢'">
      {{ user.age }}
    </td>
  </tr>
</table>

このあたりになります。
各行ごとの列データをリストで ng-repeat している感じですね。
とりあえず、表示するまではやってみました。
拡張性とかどんな感じなのかな。