ngTable是angular的一个非常简单易用的table组件，可以实现自动分页，表格记录筛选，动态表格的创建等等功能。
使用ngTable需要引入ng-table.js 和 ng-table.css 文件。
下载地址：点击打开链接
或者引入http://www.bootcdn.cn/ng-table/提供的CDN:
<link href="//cdn.bootcss.com/ng-table/1.0.0/ng-table.css" rel="stylesheet">
<script src="//cdn.bootcss.com/ng-table/1.0.0/ng-table.js"></script>在写模板的过程中，还引入了angular-ui bootstarp，但是在使用dropdown的时候发现，一旦点击设置为dropdown的按钮之后，在点击页面任何位置都会触发按动该按钮的动作，简单的分析后，觉得uib-dropdown-toggle这个自定义标签和ngTable组件存在冲突，暂时还未解决问题，希望遇到同样问题的或者有好的解决办法的能私我。
模板代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/ng-table.css" />
<link rel="stylesheet" href="css/demo.css" />
</head>
<body>
<div class="container-fluid content">
<div class="head">
<div class="row">
<div class="col-md-1">
<button class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add Question</button>
</div>
<div class="col-md-1">
<button class="btn btn-primary"><span class="glyphicon glyphicon-minus"></span> Delete</button>
</div>
</div>
</div>
<div ng-app="myApp" class="main_table">
<script type="text/ng-template" id="headerCheckbox.html">
<input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all"/>
</script>
<div ng-controller="testController as demo">
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-hover table-align">
<tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">
<td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td>
<td style="width: 2%;" title="'#'" ng-switch="row.isEditing">
<span ng-switch-default class="editable-text">{{row.id}}</span>
</td>
<td style="width: 16%;" title="'Question'" filter="{question: 'text'}" sortable="'question'" ng-switch="row.isEditing" ng-class="name.$dirty ? 'bg-warning' : ''" ng-form="name" demo-tracked-table-cell>
<span ng-switch-default class="editable-text"><a href="{{row.id}}">{{row.question}}</a></span>
</td>
<td style="width: 16%;" title="'Action'" ng-switch="row.isEditing" ng-class="action.$dirty ? 'bg-warning' : ''" ng-form="action" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">
<div class="btn-group dropdown" uib-dropdown="" is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary dropdown-toggle" uib-dropdown-toggle ng-disabled="disabled" aria-haspopup="true" aria-expanded="false">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="single-button">
<li role="menuitem">
<a href="#">Edit Question</a>
</li>
<li role="menuitem">
<a href="#">View Question</a>
</li>
</ul>
</div>
</span>
</td>
<td style="width: 16%;" title="'Module'" filter="{module: 'select'}" filter-data="demo.Module" sortable="'module'" ng-switch="row.isEditing" ng-class="module.$dirty ? 'bg-warning' : ''" ng-form="module" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.module}}</span>
</td>
<td style="width: 16%;" title="'Category'" filter="{category: 'select'}" filter-data="demo.Category" sortable="'money'" ng-switch="row.isEditing" ng-class="category.$dirty ? 'bg-warning' : ''" ng-form="category" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.category}}</span>
</td>
<td style="width: 16%;" title="'level'" filter="{level: 'select'}" filter-data="demo.Level" sortable="'level'" ng-switch="row.isEditing" ng-class="level.$dirty ? 'bg-warning' : ''" ng-form="level" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.level}}</span>
</td>
<td style="width: 16%;" title="'Score'" filter="{score: 'number'}" sortable="'score'" ng-switch="row.isEditing" ng-class="score.$dirty ? 'bg-warning' : ''" ng-form="score" demo-tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.score}}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-tpls-2.3.1.min.js"></script>
<script type="text/javascript" src="js/ng-table.js"></script>
<script>
(function() {
"use strict";
var app = angular.module("myApp", ["ngTable", "ui.bootstrap"]);
app.controller("testController", demoController);
var data = [{
'id': "1",
'question': "问题1",
'module': "IQ",
'category': "Single-choice",
'level': "Easy",
'score': "15"
}, {
'id': "2",
'question': "问题2",
'module': "Logical",
'category': "Mutiple-choice",
'level': "Difficult",
'score': "20"
}, {
'id': "3",
'question': "问题3",
'module': "English",
'category': "Short-Answer",
'level': "Easy",
'score': "10"
}, {
'id': "4",
'question': "问题4",
'module': "JAVA",
'category': "Programming",
'level': "Difficult",
'score': "25"
}, {
'id': "5",
'question': "问题5",
'module': ".NET",
'category': "Programming",
'level': "Easy",
'score': "20"
}];
var Level = [{
'id': "Easy",
'title': "Easy"
}, {
'id': "Difficult",
'title': "Difficult"
}];
var Category = [{
'id': "Single-choice",
'title': "Single-choice"
}, {
'id': "Mutiple-choice",
'title': "Mutiple-choice"
}, {
'id': "Short-Answer",
'title': "Short-Answer"
}, {
'id': "Programming",
'title': "Programming"
}];
var Module = [{
'id': "IQ",
'title': "IQ"
}, {
'id': "Logical",
'title': "Logical"
}, {
'id': "English",
'title': "English"
}, {
'id': "JAVA",
'title': "JAVA"
}, {
'id': " .NET",
'title': " .NET"
},
];
function demoController(NgTableParams, $scope) {
var self = this;
//init data
self.data = data;
self.Level = Level;
self.Category = Category;
self.Module = Module;
self.checkboxes = {
checked: false,
items: {}
};
self.tableParams = new NgTableParams({
'count': 15
}, {
counts: [],
filterDelay: 0,
dataset: data
});
// watch for check all checkbox
$scope.$watch(function() {
return self.checkboxes.checked;
}, function(value) {
angular.forEach(data, function(item) {
self.checkboxes.items[item.id] = value;
});
});
}
})();
</script>
</body>
</html>css文件
.content{
padding: 50px;
}
.content .head{
margin: 20px;
}
.main_table .table-align{
text-align: center;
}
页面效果图：
数据都是定义好的json，这里限制的单页15页，数据超过15条，自动分页。
8803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
