快捷導(dǎo)航

詳解angular ui-grid之過濾器設(shè)置

更新時間：2017年06月07日 17:02:54 作者：Inuyasha1121

本篇文章主要介紹了詳解angular ui-grid之過濾器設(shè)置，具有一定的參考價值，感興趣的小伙伴們可以參考一下

之前關(guān)于angular ui-grid過濾器設(shè)置，最近需要回顧，就順便發(fā)到隨筆上了

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); 
 }; 
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入理解Angularjs 臟值檢測
這篇文章主要介紹了深入理解Angularjs 臟值檢測，詳細(xì)的介紹了臟值檢測的原理和實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
angular報錯can't resolve all parameters&nb
這篇文章主要介紹了angular報錯can't resolve all parameters for []的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
使用Angular CLI生成路由的方法
這篇文章主要介紹了使用Angular CLI生成路由的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
詳解angularjs 關(guān)于ui-router分層使用
本篇文章主要介紹了詳解angularjs 關(guān)于ui-router分層使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
AngularJS 文件上傳控件 ng-file-upload詳解
這篇文章主要介紹了AngularJS 文件上傳控件 ng-file-upload詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
anime.js 實現(xiàn)帶有描邊動畫效果的復(fù)選框（推薦）
anime.js是一個靈活的輕型JavaScript動畫庫。這篇文章主要介紹了anime.js 實現(xiàn)帶有描邊動畫效果的復(fù)選框 ,需要的朋友可以參考下
2017-12-12
淺談Angular路由復(fù)用策略
本篇文章主要介紹了淺談Angular路由復(fù)用策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
簡單談?wù)勱P(guān)于Angular Cli打包的事
使用過angular2人都應(yīng)該知道，angular2提供的Angular CLI來快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。
2017-09-09
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解
作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來了版本4.0，下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09