详解angular ui-grid之过滤器设置


Posted in Javascript onJune 07, 2017

之前关于angular ui-grid过滤器设置,最近需要回顾,就顺便发到随笔上了

var app = angular.module('app', ['ui.grid', 'ui.grid.edit']); 
 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
 $scope.gridOptions = { 
  columnDefs: [ 
   { field: 'name' }, 
   { field: 'amount', name: 'Number', cellFilter: 'fractionFilter' }, 
   { field: 'amount', name: 'Currency', cellFilter: 'currencyFilter:this' } 
  ] 
 }; 
  
 $http.get('data.json') 
 .success(function (data) { 
  $scope.gridOptions.data = data; 
 }); 
}]) 
 
.filter('fractionFilter', function () { 
 return function (value) { 
  return value.toFixed(0); 
 }; 
}) 
 
.filter('currencyFilter', function () { 
 var currencyMap = { 
  'dollar': '$', 
  'pound': '£', 
  'euro': '?' 
 }; 
  
 return function (value, scope) { 
  return currencyMap[scope.row.entity.currency] + value.toFixed(2); 
 }; 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
微信小程序 地图map实例详解
Jun 07 #Javascript
微信小程序 http请求的session管理
Jun 07 #Javascript
Ionic2开发环境搭建教程
Aug 20 #Javascript
微信小程序Redux绑定实例详解
Jun 07 #Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 #Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 #Javascript
vue2.0 自定义日期时间过滤器
Jun 07 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python运行时间的几种方法
2016/06/17 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
django表单的Widgets使用详解
2019/07/22 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
jupyter 添加不同内核的操作
2021/02/06 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
电气自动化自荐信
2013/10/10 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
小学教育见习报告
2014/10/31 职场文书
公司年夜饭通知
2015/04/25 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python