AngularJS-基于json构建动态表

只想与我到目前为止使用的内容分享，以节省您的时间。

这是 硬编码标头 和 _动态标头的_示例（以防不关心数据结构的情况）。在这两种情况下，我都写了一些简单的指令：

customSort

customSort

.directive("customSort", function() {    return {        restrict: 'A',        transclude: true, scope: {          order: '=',          sort: '='        },        template :' <a ng-click="sort_by(order)" >'+          '    <span ng-transclude></span>'+          '    <i ng-></i>'+          '</a>',        link: function(scope) {        // change sorting order        scope.sort_by = function(newSortingOrder) {        var sort = scope.sort; if (sort.sortingOrder == newSortingOrder){     sort.reverse = !sort.reverse; } sort.sortingOrder = newSortingOrder;     };        scope.selectedCls = function(column) { if(column == scope.sort.sortingOrder){     return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up')); } else{      return'icon-sort'  }         }; }// end link    }    });

[带有静态标题的第一个选项]

我用单身

ng-repeat

这是一个很好的示例

**[Fiddle](http://jsfiddle.net/SAWsA/1758/)**

<tbody>     <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">         <td>{{item.id}}</td>         <td>{{item.name}}</td>         <td>{{item.description}}</td>         <td>{{item.field3}}</td>         <td>{{item.field4}}</td>         <td>{{item.field5}}</td>     </tr> </tbody>

[带有动态标题的第二个选项]

演示2：

**[Fiddle](http://jsfiddle.net/SAWsA/2281/)**

HTML

<table > <thead>     <tr>        <th ng-repeat="header in table_headers"  custom-sort order="header.name" sort="sort"         >{{ header.name }}  </th>        </tr> </thead> <tfoot>     <td colspan="6">         <div >  <ul>      <li ng->          <a href ng-click="prevPage()">« Prev</a>      </li>      <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "          ng-      ng-click="setPage()">          <a href ng-bind="n + 1">1</a>      </li>      <li ng->          <a href ng-click="nextPage()">Next »</a>      </li>  </ul>         </div>     </td> </tfoot> <pre>pagedItems.length: {{pagedItems.length|json}}</pre> <pre>currentPage: {{currentPage|json}}</pre> <pre>currentPage: {{sort|json}}</pre> <tbody>     <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">          <td ng-repeat="val in item" ng-bind-html-unsafe="item[table_headers[$index].name]"></td>     </tr> </tbody>        </table>

附带说明：

的

ng-bind-html-unsafe