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

之前关于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);
 };
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析angularJS中的ui-router和ng-grid模块

    浅析angularJS中的ui-router和ng-grid模块

    在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没

  • Angular表格神器ui-grid应用详解

    Angular表格神器ui-grid应用详解

    本文实例为大家分享了Angular表格神器ui-grid的具体代码,供大家参考,具体内容如下 HTML:  (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

  • 详解Angular的内置过滤器和自定义过滤器【推荐】

    在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理.首先我们看看在视图中是如何使用过滤器的. 1.currency(货币)格式化 <div ng-controller="Aaa"> <p>{{name | currency:'￥'}}</p> </div> <script type="text/javascript"&g

  • 详解Angular数据绑定及其实现方式

    详解Angular数据绑定及其实现方式

    前言 Web开发需要模型和视图之间的数据同步.这些模型基本上包含数据值,而视图则处理用户看到的内容.因此,如果您想知道这在Angular中是如何发生的,这篇有关Angular数据绑定的文章将为您提供帮助. 下面提到的是此处讨论的主题: What is Data Binding? Types of Data Binding in Angular One-way Data Binding Interpolation Property Binding Event Binding Two-way Dat

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • python Matplotlib数据可视化（2）：详解三大容器对象与常用设置

    上一篇博客中说到,matplotlib中所有画图元素(artist)分为两类:基本型和容器型.容器型元素包括三种:figure.axes.axis.一次画图的必经流程就是先创建好figure实例,接着由figure去创建一个或者多个axes,然后通过axes实例调用各种方法来添加各种基本型元素,最后通过axes实例本身的各种方法亦或者通过axes获取axis实例实现对各种元素的细节操控. 本篇博客继续上一节的内容,展开介绍三大容器元素创建即通过三大容器可以完成的常用设置. 1 figure 1.

  • 详解Angular动态组件

    使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看

  • 一文详解Java拦截器与过滤器的使用

    一文详解Java拦截器与过滤器的使用

    目录 流程图 拦截器vs过滤器 SpringMVC技术架构图 项目Demo 依赖 Interceptor拦截器 Filter过滤器 1.多Filter不指定过滤顺序 2.多Filter指定过滤顺序 流程图 拦截器vs过滤器 拦截器是SpringMVC的技术 过滤器的Servlet的技术 先过过滤器,过滤器过完才到DispatcherServlet: 拦截器归属于SpringMVC,只可能拦SpringMVC的东西: 拦截器说白了就是为了增强,可以在请求前进行增强,也可以在请求后进行增强,但是不一

  • 详解Angular组件数据不能实时更新到视图上的问题

    目录 问题起源 OnPush策略 当前组件或子组件之一触发了事件 总结 问题起源 MainComponent: @Component({ selector: 'main', template: ` <MenuComponent [isReport]="isReport"> </MenuComponent> `, changeDetection:ChangeDetectionStrategy.OnPush }) export class MainComponent

  • 详解Eclipse 字体、字号的设置、最佳字体推荐

    Eclipse 最佳字体 推荐: 步骤:Eclipse->Windows[窗口]->Preferences[首选项]->General[常规]->Appearance[外观]->Colors and Fonts[颜色和字体]->Java->Java Editor Text Font[JAVA编辑器文本字体] 如下图所示:   改成 courier new  字体最好.英文和中文的大小 都很适合. 如果 这个 页面选项卡 中 没有 Courier New 字体选项,

  • 详解nginx.conf 中 root 目录设置问题

    在配置 nginx.conf 总会遇到一些问题,下面列举一些常见的问题并说明如何解决 1.相对路径的问题 例如配置文件中 location 设置 location ~ .php${ root html } location 中root所指向的html是一个相对路径,相对的是这个配置文件的路径,假设此配置文件的位置是/etc/nginx/conf.d,那么这个html的绝对路径就是/etc/nginx/conf.d/html.因此为避免出现不必要的麻烦,在配置root路径的过程中最好用绝对路径.

  • 详解MySQL的sql_mode查询与设置

    1,执行SQL查看 select @@session.sql_mode; 全局级别: 查看 select @@global.sql_mode; 2,修改 set @@session.sql_mode='xx_mode' set session sql_mode='xx_mode' 全局级别:修改 set global sql_mode='xx_mode'; set @@global.sql_mode='xx_mode'; session均可省略,默认session,仅对当前会话有效 全局修改的话

随机推荐