Angular ng-table动态标头在内部不起作用
吕作人
问题内容：
问题答案：
我正在将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>
使用模板设置ng-table的template-header属性
<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>
类似资料：
-
嗨，我在容器内创建了三个帧，每个帧都有三个按钮，执行最小值，最大值和关闭功能。令人惊讶的是，只有一帧在工作，其余三帧不起作用。你能不能整理一下。
-
问题内容： 我在Angular中具有此功能，在其中添加了一个带有ng-click的新幻灯片。 不幸的是，动态创建的ng-click事件不起作用（ng-click在动态生成的HTML中不起作），由于它是控制器内部的函数而不是指令，因此如何解决此问题？ 问题答案： 您需要在此处添加$ compile服务，该服务会将ng-click之类的角度指令绑定到您的控制器作用域。 然后将其附加到HTML： 您还可
-
问题内容： 我究竟做错了什么？为什么$ path在函数外部正确打印，但是在函数内部无法访问？ 问题答案： 因为它没有在函数中定义。 有几种方法可以解决此问题： 1）使用亚历克斯所说的话，告诉函数它是一个全局变量： 2）将其定义为常量： 3）如果特定于该函数，则将其传递给该函数： 根据功能的实际工作原理，其中之一会起作用。
-
问题内容： 这是显示问题的小提琴。http://jsfiddle.net/Erk4V/1/ 如果我在ng-if内部有一个ng-model，就会出现该模型无法正常工作的情况。 我想知道这是一个错误还是误解了正确的用法。 问题答案： 与其他指令一样，该指令将创建子范围。请参见下面的脚本（或此jsfiddle） 因此，您的复选框将更改子作用域的内部，而不更改外部父作用域。 请注意，如果要修改父作用域中的
-
我有带有三个片段的视图页面管理器，其中一个是带有滚动视图的框架布局： 如果我在按钮上滑动，它会工作。但是如果我在滚动视图上滑动，它就不起作用了，只有向上/向下滚动起作用。 编辑：我试图覆盖滚动视图的OnTouchEvent: 现在我可以禁用滚动，但滑动仍然不起作用，如果X点之间的差异超过40，我将事件传递给viewpager，但viewpager的onTouchListener没有收到此事件；
-
问题内容： 我有一种情况，在使用网络应用程序时，我需要显示动态图像。我想显示图像文件名存储在变量中的位置。该变量是一个属性，它返回一个存储变量，该变量在上异步填充。 但是，当我刚这样做时，它会完美地工作： 正确的方法应该是什么？ 问题答案： 我通过以下代码来工作 并在HTML中： 但是不确定为什么我以前的方法行不通。