如何使用md-toolbar创建表粘性标题
我已将md-toolbar中的thead包含在固定表头中，当我滚动表格内容时，标题未固定到顶部。以下是我的代码和指向codepen http://codepen.io/apps4any/pen/WQgKMw
的链接 <html lang="en" ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css">
<link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
<div class="md-title">Material Design Data Table</div>
</div>
</md-toolbar>
<md-content layout="column" flex>
<md-card ng-controller="nutritionController">
<md-data-table-container>
<table md-data-table class="md-primary" md-row-select="selected" md-progress="deferred">
<md-toolbar>
<thead md-order="query.order" md-trigger="onorderchange">
<tr>
<th order-by="name" name="Dessert" unit="100g serving"></th>
<th order-by="type" name="Type"></th>
<th numeric order-by="calories.value" name="Calories"></th>
<th numeric unit="g" order-by="fat.value" name="Fat"></th>
<th numeric unit="g" order-by="carbs.value" name="Carbs"></th>
<th numeric unit="g" order-by="protein.value" name="Protein"></th>
<th numeric unit="mg" order-by="sodium.value" name="Sodium"></th>
<th numeric unit="%" order-by="calcium.value" name="Calcium"></th>
<th numeric unit="%" order-by="iron.value" name="Iron"></th>
</tr>
</thead>
</md-toolbar>
<tbody>
<tr md-auto-select md-disable-select="dessert.name === 'Jelly bean'" ng-repeat="dessert in desserts.data | orderBy: query.order | limitTo: query.limit: (query.page - 1) * query.limit">
<td>{{dessert.name}}</td>
<td>
<md-select ng-model="dessert.type" placeholder="Other">
<md-option ng-value="type" ng-repeat="type in getTypes()">{{type}}</md-option>
</md-select>
</td>
<td>{{dessert.calories.value}}</td>
<td>{{dessert.fat.value | number: 2}}</td>
<td>{{dessert.carbs.value}}</td>
<td>{{dessert.protein.value | number: 2}}</td>
<td>{{dessert.sodium.value}}</td>
<td show-unit>{{dessert.calcium.value}}</td>
<td show-unit>{{dessert.iron.value}}</td>
</tr>
</tbody>
</table>
</md-data-table-container>
<md-data-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{desserts.count}}" md-trigger="onpagechange"></md-data-table-pagination>
</md-card>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
<script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
</body>
</html>
JS：
angular.module('demoApp', ['ngMaterial', 'md.data.table'])
.controller('nutritionController', ['$q', '$scope', '$timeout', function ($q, $scope, $timeout) {
$scope.selected = [];
$scope.query = {
order: 'name',
limit: 15,
page: 1
};
$scope.desserts = {
"count": 9,
"data": [
{
"name": "Frozen yogurt",
"type": "Ice cream",
"calories": { "value": 159.0 },
"fat": { "value": 6.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 4.0 },
"sodium": { "value": 87.0 },
"calcium": { "value": 14.0 },
"iron": { "value": 1.0 }
}, {
"name": "Ice cream sandwich",
"type": "Ice cream",
"calories": { "value": 237.0 },
"fat": { "value": 9.0 },
"carbs": { "value": 37.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 129.0 },
"calcium": { "value": 8.0 },
"iron": { "value": 1.0 }
}, {
"name": "Eclair",
"type": "Pastry",
"calories": { "value": 262.0 },
"fat": { "value": 16.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 6.0 },
"sodium": { "value": 337.0 },
"calcium": { "value": 6.0 },
"iron": { "value": 7.0 }
}, {
"name": "Cupcake",
"type": "Pastry",
"calories": { "value": 305.0 },
"fat": { "value": 3.7 },
"carbs": { "value": 67.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 413.0 },
"calcium": { "value": 3.0 },
"iron": { "value": 8.0 }
}, {
"name": "Jelly bean",
"type": "Candy",
"calories": { "value": 375.0 },
"fat": { "value": 0.0 },
"carbs": { "value": 94.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 50.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 0.0 }
}, {
"name": "Lollipop",
"type": "Candy",
"calories": { "value": 392.0 },
"fat": { "value": 0.2 },
"carbs": { "value": 98.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 38.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 2.0 }
}, {
"name": "Honeycomb",
"type": "Other",
"calories": { "value": 408.0 },
"fat": { "value": 3.2 },
"carbs": { "value": 87.0 },
"protein": { "value": 6.5 },
"sodium": { "value": 562.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 45.0 }
}, {
"name": "Donut",
"type": "Pastry",
"calories": { "value": 452.0 },
"fat": { "value": 25.0 },
"carbs": { "value": 51.0 },
"protein": { "value": 4.9 },
"sodium": { "value": 326.0 },
"calcium": { "value": 2.0 },
"iron": { "value": 22.0 }
}, {
"name": "KitKat",
"type": "Candy",
"calories": { "value": 518.0 },
"fat": { "value": 26.0 },
"carbs": { "value": 65.0 },
"protein": { "value": 7.0 },
"sodium": { "value": 54.0 },
"calcium": { "value": 12.0 },
"iron": { "value": 6.0 }
}
]
};
$scope.getTypes = function () {
return ['Candy', 'Ice cream', 'Other', 'Pastry'];
};
$scope.onpagechange = function(page, limit) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve();
}, 2000);
return deferred.promise;
};
$scope.onorderchange = function(order) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve();
}, 2000);
return deferred.promise;
};
}]);
答案 0 :(得分：0)
md-data-table的作者通过github提供了另一个指令，您可以将其与md-data-table结合使用来创建固定的头。它位于：https://github.com/daniel-nagy/fixed-table-header
我在几个地方成功使用它。