angularjs 其实也有一个currency指令,不过好像只是换符号而已。

这里自己写了一个简单的兑换率filter

   <div ng-controller="ctrl">
<div>{{ 100 | myCurrency}}</div>
<div ng-click="change1('SGD')">change</div>
</div> angular.module("Main", dependentModuleList).
controller("ctrl", function ($scope, currencyService) {
$scope.change1 = function (code) {
currencyService.changeCodeTo(code);
};
});

调用大概是这样的 , 100 应该变成 USD 100.00 ,点击事件后就兑换成 SGD xx.xx

  angular.module("Currency", []).
provider("currencyService", [function () {
var that = this;
this.defaultCode = "USD"; //允许通过provider修改
this.$get = ["$rootScope", function ($rootScope) {
var COOKIE_KEY = "currecyCode";
var SERVICE_PATH = "//service.stooges.com.my/currency.ashx?defaultCode=" + that.defaultCode; //这里可以请求一个当前的 rate table (来自 http://www.xe.com/currencytables)
var defaultCode = that.defaultCode;
var currentCode = G.s.Cookie.get(COOKIE_KEY) || defaultCode;
var rateColletion = {}; //{USD:3.1538542348}
var ajaxing = false; function getRateFromServer() {
ajaxing = true;
G.s.fn.jsonp(SERVICE_PATH).then(function (response) {
ajaxing = false;
rateColletion = JSON.parse(response).data;
$rootScope.$digest(); //手动渲染
}, function () {
console.log("get currency rate table fail !");
});
}
function getMoneyFormat(money, code) {
return code + " " + (parseFloat(money).toFixed(2));
}
return {
changeCodeTo: function (code) {
currentCode = code; //请在外部digest
G.s.Cookie.set(COOKIE_KEY, currentCode, new Date().addMonths(1));
},
convertMoney: function (money) {
if (defaultCode === currentCode || ajaxing) { //正在向服务器请求的话也直接返回
return getMoneyFormat(money, currentCode);
}
var rate = rateColletion[currentCode];
if (rate != undefined) {
return getMoneyFormat(money / rate, currentCode); //这里是用除法
}
else {
getRateFromServer(); //第一次得向服务器请求rate表格
return getMoneyFormat(money, currentCode);
}
}
}
}]
}]).
filter("myCurrency", ["$rootScope", "currencyService", function ($rootScope, currencyService) {
//手动调用的话要注意, 如果没有rate,会直接返回原value
return function (money) {
return currencyService.convertMoney(money);
}
}]);

过程是通过渲染时判断当前货币然后去服务端获取兑换率表格进行兑换。这里用的是一个jsonp请求。

需要判断只请求一次,请求返回时得手动渲染。

Currency 货币 filter的更多相关文章

  1. 程序猿的量化交易之路(21)--Cointrader之Currency货币实体(9)

    转载须注明出自:http://blog.csdn.net/minimicall? viewmode=contents,http://cloudtrader.top 货币,Cointrader中基本实体 ...

  2. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  3. 走进AngularJs(七) 过滤器(filter)

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  4. 走进AngularJs(七) 过滤器(filter) - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  5. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  6. AngularJs--过滤器(filter)

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  7. angularjs filter 详解

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  8. Angular之filter学习

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  9. AngularJS的过滤器$filter

    过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果.例如获得数据集,可排序后再返回. ng内置的共有九种过滤器: currency 货币 使用currency可以将数字格式化 ...

随机推荐

  1. 尚学堂 JAVA Day3 概念总结

    java中的运算符 1.算术运算符 + - * / % Arithmetic operators + 运算符有三种身份 Additive Operator 1)加法:如 a + b; 2)连接:如 “ ...

  2. Java类加载器深入理解

    本篇文章主要是详细写一下个人对Java ClassLoader的理解. 首先回顾一下,java虚拟机载入java类的步骤:java文件经过编译器编译后变成字节码文件(.class文件),类加载器(Cl ...

  3. Linux操作系统以及各大发行版介绍——Linux operating system and major distribution is introduced

    什么是Linux? 也许很多人会不屑的说,Linux不就是个操作系统么.错!Linux不是一个操作系统,严格来讲,Linux只是一个操作系统中的内核.内核是什么?内核建立了计算机软件与硬件之间通讯的平 ...

  4. appcan里面模板的使用

    1:首先要定义一个字符串如果太长需要换行,可以用"\"来分割每行 2:模板里面使用的是ejs语法,所以可以使用if else语句等 3:字符串定义好之后要用appcan.view. ...

  5. Ubuntu 13.04编译boost1.54

    因为要用基于GCC4.8.1的boost最新版本的库,默认apt-get install 安装的是boost1.53, 并且基于GCC4.7.3,不是我想要的.所以决定下载源代码自己编译. 下载(后面 ...

  6. hdu 3037 Saving Beans(组合数学)

    hdu 3037 Saving Beans 题目大意:n个数,和不大于m的情况,结果模掉p,p保证为素数. 解题思路:隔板法,C(nn+m)多选的一块保证了n个数的和小于等于m.可是n,m非常大,所以 ...

  7. Ellipse常用快捷键

    Ctrl+m:视窗大小变化 Ctrl+F6:在打开的文件件进行切换 Ctrl+F7:在资源窗口间切换Ctrl+F8:在各种模式下进行切换 Ctrl+e:选择某个打开的文件Shift+home:整行选取 ...

  8. 索引时利用K-邻近算法过滤重复歌曲

    最近一直在做公司搜索的优化与维护,做完索引和搜索的分离之后,又有一个新需求,因为做的是歌曲方面的搜索,所以在数据库中有多个同歌名,同演唱者的的数据,这样在用户搜索的时候,会出来一大堆不同版本的歌曲,影 ...

  9. struts2,hibernate,spring整合笔记(1)

    今天终于配置好了ssh框架的整合,记录下过程供参考 环境:window8.1,jdk1.7 ,带有javaee的eclipse,也就是说要能发布web项目,TOMCAT服务器,tomcat配置涉及到环 ...

  10. Java基础知识强化74:正则表达式之分割功能 (扩展练习)

    1. 看程序写结果:(面试题考过) package cn.itcast_03; /* * 分割功能练习 */ public class RegexDemo2 { public static void ...