我正在将ng-table与动态列一起使用,使用http://bazalt-cms.com/ng- table/example/20中的创建者示例
它工作得很好,直到我尝试使用transclude包裹指令之前,女巫导致标题消失,如http://plnkr.co/edit/mjYVEf所示。
index.html
<!DOCTYPE html> <html> <head> <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script> <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script> <script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script> <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" /> <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-app="main" ng-controller="DemoCtrl"> <div ng-controller="DemoCtrl"> <transclude-example> Columns: <label class="checkbox" ng-repeat="column in columns"> <input type="checkbox" ng-model="column.visible" /> {{column.title}} </label> <table ng-table="tableParams" show-filter="true" class="table"> <thead> <tr> <th ng-repeat="column in columns" ng-show="column.visible" class="text-center sortable" ng-class="{ 'sort-asc': tableParams.isSortBy(column.field, 'asc'), 'sort-desc': tableParams.isSortBy(column.field, 'desc') }" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')"> {{column.title}} </th> <!--<th>Columns:{{columns.length}}</th>--> </tr> </thead> <tbody> <tr ng-repeat="user in $data"> <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field"> {{user[column.field]}} </td> </tr> </tbody> </table> </transclude-example> </body> </html>
script.js
var app = angular.module('main', ['ngTable']). controller('DemoCtrl', function($scope, $filter, ngTableParams) { var data = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.columns = [ { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } }, { title: 'Age', field: 'age', visible: true } ]; $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, // count per page filter: { name: 'M' // initial filter } }, { total: data.length, // length of data getData: function($defer, params) { // use build-in angular filter var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); } }); var originalData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.originalColumns = [ { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } }, { title: 'Age', field: 'age', visible: true } ]; $scope.originalTableParams = new ngTableParams({ page: 1, // show first page count: 10, // count per page filter: { name: 'M' // initial filter } }, { total: originalData.length, // length of data getData: function($defer, params) { // use build-in angular filter var orderedData = params.sorting() ? $filter('orderBy')(originalData, params.orderBy()) : originalData; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); } }); }); app.directive('transcludeExample', function() { return { restrict: 'EA', template: '<div ><div><strong>Transcluded Example</strong></div><div ng-transclude></div></div>', replace: true, transclude: true }; });
有人遇到过同样的问题吗?
为页眉定义模板,并设置ng-table 的 template-header 属性。
您可以看到代码 http://plnkr.co/edit/EXVkjabwfjCreNZAY1c2?p=preview
<script id="sample_ng_header" type="text/ng-template"> <tr> <th ng-repeat="column in columns" ng-show="column.visible" class="text-center sortable" ng-class="{ 'sort-asc': tableParams.isSortBy(column.field, 'asc'), 'sort-desc': tableParams.isSortBy(column.field, 'desc') }" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')"> {{column.title}} </th> <!--<th>Columns:{{columns.length}}</th>--> </tr> </script>
<table ng-table="tableParams" template-header="sample_ng_header" show-filter="true" class="table"> <tbody> <tr ng-repeat="user in $data"> <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field"> {{user[column.field]}} </td> </tr> </tbody> </table>