angularjs表格ng-table使用备忘录
2016-03-09 00:00
886 查看
项目中用到angularjs的表格ng-table,功能相当强大,像搜索、排序、checkbox、分页、每页表格显示数目等都有。API,demo什么的也只能参考官网了。这里做个备忘,哪天肯定还会用到。
HTML:
js:
json数据:
以上就是本文的全部内容,希望对大家的学习有所帮助。
详解AngularJS中的表格使用
使用angularjs创建简单表格
angularjs表格分页功能详解
如何用angularjs***一个完整的表格
AngularJS中的Directive自定义一个表格
HTML:
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="angular.js"></script> <script data-require="ng-table@*" data-semver="0.3.0" src="ngTable.js"></script> <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css" /> <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-app="main" ng-controller="DemoCtrl"> <p><strong>Page:</strong> {{tableParams.page()}} <p><strong>Count per page:</strong> {{tableParams.count()}} <p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p> <table ng-table="tableParams" show-filter="true" class="table"> <tr ng-repeat="user in $data" ng-class="{ 'emphasis': user.money > 500 }"> <td width="30" style="text-align: left" header="'ng-table/headers/checkbox.html'"> <input type="checkbox" ng-model="checkboxes.items[user.organizationId]" /> </td> <td data-title="'编号'" sortable="'organizationId'"> {{user.organizationId}} </td> <td data-title="'名称'" sortable="'name'"> {{user.name}} </td> </tr> </table> <script type="text/ng-template" id="ng-table/headers/checkbox.html"> <input type="checkbox" ng-model="checkboxes.checked" id="select_all" name="filter-checkbox" value="" /> </script> </body> </html>
js:
var app = angular.module('main', ['ngTable']). controller('DemoCtrl', function($scope, ngTableParams, NameService) { var data = NameService.data; $scope.tableParams = new ngTableParams( { page: 1, // show first page count: 10, // count per page sorting: {name:'asc'} }, { total: 0, // length of data getData: function($defer, params) { NameService.getData($defer,params,$scope.filter); } }); $scope.$watch("filter.$", function () { $scope.tableParams.reload(); }); }); app.service("NameService", function($http, $filter){ function filterData(data, filter){ return $filter('filter')(data, filter); } function orderData(data, params){ return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; } function sliceData(data, params){ return data.slice((params.page() - 1) * params.count(), params.page() * params.count()) } function transformData(data,filter,params){ return sliceData( orderData( filterData(data,filter), params ), params); } var service = { cachedData:[], getData:function($defer, params, filter){ if(service.cachedData.length>0){ console.log("using cached data") var filteredData = filterData(service.cachedData,filter); var transformedData = sliceData(orderData(filteredData,params),params); params.total(filteredData.length) $defer.resolve(transformedData); } else{ console.log("fetching data") $http.get("data.json").success(function(resp) { angular.copy(resp,service.cachedData) params.total(resp.length) var filteredData = $filter('filter')(resp, filter); var transformedData = transformData(resp,filter,params) $defer.resolve(transformedData); }); } } }; return service; });
json数据:
[{ "hidden": 1, "launchImage": "2015_4_9_12_bb7e0a446ed74ae7ad0a3554a54183bc_1298477763", "name": "张三", "orgId": 1498031949070997504, "organizationId": "1498031949070997504" }, { "hidden": 1, "launchImage": "http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219|39e202124ac90ec531009b0edbbbe0ba", "name": "李四", "orgId": 1498046360909250560, "organizationId": "1498046360909250560" }]
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
AngularJS基础知识笔记之表格详解AngularJS中的表格使用
使用angularjs创建简单表格
angularjs表格分页功能详解
如何用angularjs***一个完整的表格
AngularJS中的Directive自定义一个表格
相关文章推荐
- Jquery使用ajax以及angularjs 动态模板加载并进行渲染
- 【一起学AngularJS】第四章、Angular模版技术
- angular.element方法汇总以及AngularJS 动态添加元素和删除元素
- 【一起学AngularJS】第三章、静态模版
- 【一起学AngularJS】第二章、入门引导
- JavaScript文件中调用AngularJS内部方法或改变$scope变量
- 【一起学AngularJS】第一章、入门教程说明
- AngularJS指令
- AngularJS实现ajax跨域访问
- Angular零星知识点(一)
- AngularJS 指令的 Scope (作用域)
- Angularjs学习笔记
- angularJS soap lib 选择
- ionic dev env
- angularjs 路由回退,返回到上一个路由
- protractor设置cookie登录
- 5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)
- Angularjs material 实现搜索框功能
- angularjs material 实现搜索框
- Angularjs material 实现搜索框功能