angularjs ngTable -Custom filter template-calendar
jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html">
<input type="text" ng-click="popup1.opened=!popup1.opened" uib-datepicker-popup="{{formats[2]}}" ng-model="vm.dateInfoOne" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly class="form-control width-inherit" style="background-color: #fff"/>
</script>
<table ng-table="vm.tableParamsCompletedOrder" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="order in $data">
<td title="'Date'" filter="{orderDate: 'path/to/your/filters/top-Date-One.html'}" sortable="'orderDate'">{{order.orderDate | date:'dd-MM-yyyy'}}</td>
<td title="'User Email'" filter="{userEmail: 'text'}" sortable="'userEmail'">{{order.userEmail}}</td>
<td title="'First Name'" filter="{firstName: 'text'}" sortable="'firstName'">{{order.firstName}}</td>
<td title="'Last Name'" filter="{lastName: 'text'}" sortable="'lastName'">{{order.lastName}}</td>
<td title="'Company'" filter="{companyName: 'text'}" sortable="'companyName'">{{order.companyName}}</td>
<td title="'Order Number'" filter="{orderCode: 'text' }" sortable="'orderCode'"><a href="#" data-ng-click="fn.openOrderInfo(order);">{{order.orderCode}}</a></td>
<td title="'Datasource'" filter="{datasource: 'text'}" sortable="'datasource'">{{order.datasource}}</td>
<td title="'Quantity'" filter="{quantity : 'text'}" sortable="'quantity'">{{order.quantity}}</td>
</tr>
</table> 其中 input是bootstrap中对应的日历控件
id="path/to/your/filters/top-Date-One.html" 对应 filter="{orderDate: 'path/to/your/filters/top-Date-One.html'}" js:
angular.module("ni.controllers.user.reports", ["ngTable", "ngTableDemos", "angularMask"]);
angular.module("ni.controllers.user.reports").config(setConfigPhaseSettings);
setConfigPhaseSettings.$inject = ["ngTableFilterConfigProvider"];
function setConfigPhaseSettings(ngTableFilterConfigProvider) {
var filterAliasUrls = {
// note: ngTable also registers a 'number' filter
// we're overriding this alias to point to our custom template
};
ngTableFilterConfigProvider.setConfig({
aliasUrls: filterAliasUrls
}); // optionally set a default url to resolve alias names that have not been explicitly registered
// if you don't set one, then 'ng-table/filters/' will be used by default
ngTableFilterConfigProvider.setConfig({
defaultBaseUrl: "ng-table/filters/"
});
} angularjs controller 中 //日历控件
$scope.popup1 = {
opened: false
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate'];
$scope.altInputFormats = ['M!/d!/yyyy']; //ordersList post得到的结果集合
vm.tableParamsCompletedOrder = new NgTableParams({count: 15 }, {counts:[], dataset: ordersList }); //对于日历使用监听
$scope.$watch('vm.dateInfoOne',function(n,o){
if(n!=o && n != undefined && vm.status=="2,3,4"){
var temp;
temp= _.filter(vm.tempCompletedOrder,function(item){
return $filter('date')(n, 'yyyy-MM-dd')==$filter('date')(item.orderDate, 'yyyy-MM-dd');
});
vm.tableParamsCompletedOrder = new NgTableParams({count: 15, filter: vm.tableParamsCompletedOrder.filter()}, {counts:[], dataset: temp });
}else {
if (vm.tableParamsCompletedOrder != undefined) {
vm.tableParamsCompletedOrder = new NgTableParams({count: 15, filter: vm.tableParamsCompletedOrder.filter()}, {counts: [], dataset: vm.tempCompletedOrder});
}
}
}) 其中
vm.tableParamsCompletedOrder.filter()是向vm.tableParamsCompletedOrder中增加之前的过滤条件
$filter('date')(item.orderDate, 'yyyy-MM-dd')将日期格式化,item.orderDate是字符戳的形式 具体参考http://ng-table.com/#/filtering/demo-custom-template
angularjs ngTable -Custom filter template-calendar的更多相关文章
- Part 13 Create a custom filter in AngularJS
Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...
- Angularjs 1 使用filter格式化输出href
Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...
- HTML5 & custom element & template
HTML5 & custom element & template template https://codepen.io/xgqfrms/pen/eYYExvp https://cs ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- AngularJS 特性—SinglePage、template、Controller
单页Web应用(SinglePage) 顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作. 模板(templa ...
- Angularjs ngTable使用备忘
项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. ...
- angularjs 指令详解 - template, restrict, replace
通过指令机制,angularjs 提供了一个强大的扩展系统,我们可以通过自定义指令来扩展自己的指令系统. 怎样定义自己的指令呢? 我们通过 Bootstrap UI来学习吧.这个项目使用 angula ...
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- 详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
随机推荐
- Hidden Password
zoj1729:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=729 题意:就是求字符串的最小表示,模板题. 题解:直接贴模板. ...
- mysql视图的作用(详细)
测试表:user有id,name,age,sex字段 测试表:goods有id,name,price字段 测试表:ug有id,userid,goodsid字段 视图的作用实在是太强大了,以下是我体验过 ...
- 如何利用服务器下发的Cookie实现基于此Cookie的会话保持
Cookie是一种在客户端保持HTTP状态信息的常用技术,基于Cookie的会话保持常常出现在很多AX的部署案例中,尤其是涉及电子交易的系统部署中.此类系统往往要求负载均衡设备按照服务器下发的Cook ...
- 读懂Java中的Socket编程
Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的.本文会介绍一下基于TCP/IP的S ...
- mysql优化21条经验(转)
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序 员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...
- log4j将日志输出到控制台,文件,邮件
#将日志写到文件 log4j.appender.file=org.apache.log4j.DailyRollingFileAppender log4j.appender.file.File=e\:\ ...
- 14.6.8 Configuring the InnoDB Master Thread IO Rate 配置InnoDB 主线程IO 速率:
14.6.8 Configuring the InnoDB Master Thread IO Rate 配置InnoDB 主线程IO 速率: 主线程 在InnoDB 是一个线程 执行各种任务在后台. ...
- 14.5.5.2 Deadlock Detection and Rollback Deadlock 检测和回滚
14.5.5.2 Deadlock Detection and Rollback Deadlock 检测和回滚 InnoDB 自动检测事务死锁和回滚一个事务 InnoDB 尝试挑选小的事务来回滚,事务 ...
- TortoiseSVN优化设置
设置log messages的字体 TortoiseSVN默认的字体太小了,看着难受: 可以在Settings > 左侧目录树General > Dialogs 1中进行设置: 使用Bey ...
- [Java] Java IO 概况
Java IO 是 Java 的一套 API, 用于读入和写出数据(输入和输出).Java IO API 位于 java.io package.实际上 java.io package 没有解决所有的输 ...