<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="ng-table.min.css">
<script src="angular.js"></script>
<script src="ng-table.min.js"></script>
<script>
(function () {
'use strict';
var app = angular.module('myApp', ['ngTable']);
app.controller('demoController', demoController);
demoController.$inject = [
'NgTableParams'
];
function demoController(NgTableParams) {
this.tableParams = new NgTableParams(
{
sorting: {
name: 'asc'
}
},
{
dataset: [{"id":1,"name":"Nissim","age":41,"money":454},{"id":2,"name":"Mariko","age":10,"money":-100},{"id":3,"name":"Mark","age":39,"money":291},{"id":4,"name":"Allen","age":85,"money":871},{"id":5,"name":"Dustin","age":10,"money":378},{"id":6,"name":"Macon","age":9,"money":128},{"id":7,"name":"Ezra","age":78,"money":11},{"id":8,"name":"Fiona","age":87,"money":285},{"id":9,"name":"Ira","age":7,"money":816},{"id":10,"name":"Barbara","age":46,"money":44},{"id":11,"name":"Lydia","age":56,"money":494},{"id":12,"name":"Carlos","age":80,"money":193}]
}
);
}
app.controller('dynamicDemoController', dynamicDemoController);
dynamicDemoController.$inject = [
'NgTableParams'
];
function dynamicDemoController(NgTableParams) {
this.cols = [
{
field: 'name',
title: 'Name',
sortable: 'name',
show: true
},
{
field: 'age',
title: 'Age',
sortable: 'age',
show: true
},
{
field: 'money',
title: 'Money',
show: false // 控制显示隐藏
}
];
this.tableParams = new NgTableParams(
{
sorting: { age: 'desc' }
},
{
dataset: [{"id":1,"name":"Nissim","age":41,"money":454},{"id":2,"name":"Mariko","age":10,"money":-100},{"id":3,"name":"Mark","age":39,"money":291},{"id":4,"name":"Allen","age":85,"money":871},{"id":5,"name":"Dustin","age":10,"money":378},{"id":6,"name":"Macon","age":9,"money":128},{"id":7,"name":"Ezra","age":78,"money":11},{"id":8,"name":"Fiona","age":87,"money":285},{"id":9,"name":"Ira","age":7,"money":816},{"id":10,"name":"Barbara","age":46,"money":44},{"id":11,"name":"Lydia","age":56,"money":494},{"id":12,"name":"Carlos","age":80,"money":193}]
}
);
}
}());
(function () {
'use strict';
angular.module('myApp').run(configureDefaults);
configureDefaults.$inject = ['ngTableDefaults'];
function configureDefaults(ngTableDefaults) {
ngTableDefaults.params.count = 5;
ngTableDefaults.settings.counts = [];
}
}());
</script>
</head>
<body>
<div ng-app="myApp" class="container-fluid">
<div class="row">
<div class="col-md-6" ng-controller="demoController as demo">
<h3>ngTable directive</h3>
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'" sortable="'name'">{{row.name}}</td>
<td data-title="'Age'" sortable="'age'">{{row.age}}</td>
<td data-title="'Money'">{{row.money}}</td>
</tr>
</table>
</div>
<div class="col-md-6" ng-controller="dynamicDemoController as demo">
<h3>ngTableDynamic directive</h3>
<table ng-table-dynamic="demo.tableParams with demo.cols" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns">{{row[col.field]}}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号