我正在使用带有动态列的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
};
});
有人遇到同样的问题吗?
答案 0 :(得分:18)
定义标题的模板,并设置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>
答案 1 :(得分:13)
自2015年2月以来,有一种更新的方法可以做到这一点。我发现以下最初是从this issue on github链接的,但是编写的演示版本自原版以来已经更新。
它使用新的ngTableDynamic指令。
演示位于http://ng-table.com/#/formatting/demo-dynamic-js-values。
我认为要注意的主要代码,假设你对ng-table的其余部分已经足够熟悉,
<table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="user in $data">
<td ng-repeat="col in $columns">{{user[col.field]}}</td>
</tr>
</table>
tableParams with cols
部分将被解析,在with
左右分割以获取表格配置和列定义(例如$scope.tableParams
和$scope.cols
)。您可以使用以下代码查看列定义:
var usernameCol = {
title: 'Full Name',
titleAlt: 'Name',
sortable: 'name',
filter: { name: 'select' },
filterData: names,
show: true,
field: 'name'
};
var ageCol = { ... }
$scope.cols = [usernameCol, ageCol];
答案 2 :(得分:0)
这是我的解决方案:上面的模板标题解决方案对我不起作用。诀窍是在标题中添加列并在数据单元格中执行相同的操作
<table ng-table="tableParams" class="table">
<tr>
<th ng-repeat="col in tableCols"
class="text-left sortable header observation-header" ng-class="{
'sort-asc': tableParams.isSortBy(col.field, 'asc'),
'sort-desc': tableParams.isSortBy(col.field, 'desc')
}"
ng-click="tableParams.sorting(col.field, tableParams.isSortBy(col.field, 'desc') ? 'asc' : 'desc')">
<div>{{col.title}}</div>
</th>
</tr>
<tbody>
<tr ng-repeat="dataObj in $data">
<td ng-repeat="col in tableCols" data-title="col.title" sortable="col.field">{{dataObj[col.field]}}</td>
</tr>
></tbody>
</table>