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. win7安装ruby on rails

    开发机:win7 旗舰版 - 64位 1,安装ruby,下载rubyinstaller-2.0.0-p451.exe 下载地址:http://rubyinstaller.org/downloads/ ...

  2. python_Opencv_滑动条用法

    前言: 创建一个简单的程序来说明滑动条用法:通过调节滑动条来设定画板颜色. 我们要创建一个窗口来显示显色,还有三个滑动条来设置B,G,R 的颜色. 当我们滑动滚动条是窗口的颜色也会发生相应改变. 默认 ...

  3. WINDOWS UPDAET

      相信各位或多或少都知道 Windows Update 功能,Windows 有了它就可以随时升级到最新的程序版本,同时对防止安全威胁也能起到很大的作用 在 Windows 7 中,安装完成首次运行 ...

  4. 菜鸟学习 - Unity中的热更新 - LuaInterface用户指南

    [由于学习,所以翻译!] 1.介绍 LuaInterface 是 Lua 语言和 Microsoft.NET 平台公共语言运行时 (CLR) 之间的集成库. 非常多语言已经有面向 CLR 编译器和 C ...

  5. js上拉加载、下拉刷新的插件

    之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...

  6. AsyncTask两种线程池

        AsyncTask两种线程池  http://bbs.51cto.com/thread-1114378-1.html (API 3.0以后): 1.THREAD_POOL_EXECUTOR, ...

  7. Java多线程——线程池

    系统启动一个新线程的成本是比较高的,因为它涉及到与操作系统的交互.在这种情况下,使用线程池可以很好的提供性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更应该考虑使用线程池. 与数据库连接池类似 ...

  8. codevs 4650 破损的键盘(链表)

    /* 之前一直不重视链表 (好吧说实话主要是看着板子都是指针就怂了T.T) 这道题比较基础 应用了链表的思想 数组模拟指针 遇到的问题就是跑着跑着光标跳到前面或者跳到后面 我们用next储存每个点下一 ...

  9. 去掉input【type=number】默认的上下箭头

    input::-webkit-inner-spin-button {-webkit-appearance: none;}input::-webkit-outer-spin-button {-webki ...

  10. .Net程序员 Solr-5.3之旅 (二)Solr 安装

    阅读目录 引言 Solr5.3环境搭建 Solr5.3创建第一个Core 结尾 引言 一个糟糕的设计有好的表现形式,它会被判死缓,一个好的设计有糟糕的表现形式,它会被判死刑立即执行. 以上摘自一个设计 ...