Currency 货币 filter

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请求。

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

时间: 2024-12-16 17:34:03

Currency 货币 filter的相关文章

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

转载须注明出自:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrader.top 货币,Cointrader中基本实体.我们通过代码来学习该实体: package org.cryptocoinpartners.schema; import java.util.List; import javax.persistence.Cacheable; import javax.persistence.Entity; impor

angularJS学习小结——filter

引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输 入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数 据,这样我们就可以利用过滤器来实现,angularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就 简单的给大家介绍一些. 内置过滤器 ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象). li

AngularJS Filter(过滤器)用法

一.在视图模板(View Template)中使用 在表达式中应用Filters (过滤器) 需要遵循格式如下: {{ expression | filter }}        即         {{ 表达式 | 过滤器 }} 例如:{{ 12 | currency }}     输出为    $12.00 在输出结果中应用Filters (过滤器) 通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源. 需要遵循格式如下: {{ expression

AngularJS学习之filter过滤器的用法

系统的学习angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }}   //结果:L

angularjs之filter过滤器

现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78

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

时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).

AngularJS 过滤器(filter)

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

AngularJs Filter

Filter 公司一直比较忙.. 很忧伤. 终于有点儿闲暇继续看会书 写会笔记. Filter 顾名思义 就是过滤器. 比如 排序,筛选,格式化等等. 有三种方法. 后台 JavaScript 原生 {{ data | fitler }} 如果用 angularjs 大概就这三种. 区别 后台 单次传输多,多次传输就很不划算,每次都请求. 前台. 一次传输的数据较多. JavaScript 或者 {{}} 无非是 Controller 是否重用的问题. 格式 {{ dataSource | fi

AngularJS 特性—Route、Directive、Filter

Route(路由) AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面