`

AngularJs directive使用自定义filter

阅读更多
/**
         * money formatter, will add <small> tag for the yuan and the decimal
         * <div ng-bind-html="number|slMoney [:shrink [:noHtml :decimalLength]]"></div>
         * */
        sl.filter('slMoney',['$filter','$sce',function($filter,$sce) {
            /**
             * @number input number , by default (mostly used) : 32123.34 --> 32,123<small>.34元</small>
             * @shrink true -- will put wy at the end ,
             *                should use this only when the number is multiple of 100,
             *                or with decimal 2 will lose the money in position 1 and 2
             *                slMoney(11230,true)--> 1<small>.12万元</small> , 30 will lost
             * @noHtml true -- won't add the <small> tag
             * @decimalLength define the decimal length, default 2 , usually we use 2
             * @noCurrencySign wont add yuan at the end
             */
            return function(number,shrink,noHtml,decimalLength,noCurrencySign) {
                number = replaceMoneySign(number);
                var _nf = $filter('number');
                var n = '', sign = y;
                var dl = decimalLength || decimalLength == 0 ? decimalLength : 2;
                if(!shrink) {
                    n = _nf(number, dl);
                }
                else{
                    var multiple = 1,m=1e4;
                    if(number >= m) { multiple = m;   sign = wy; }
                    n = _nf(number / multiple, number % multiple == 0 ? 0 : dl);
                }
                var index =  n.indexOf('.');
                var beforeDecimal = index < 0 ? n : n.substring(0, index);
                var afterDecimal = index < 0 ? '' : n.substring(index);
                sign = noCurrencySign  ? '' : sign;
                var res = beforeDecimal + (!noHtml ? '<small>':'') + afterDecimal + sign + (!noHtml ? '</small>':'');
                return $sce.trustAsHtml(res);
            };
        }]);

 

// js使用
sl.directive('slPlanCard', ['$sce', '$filter',
function($sce, $filter){
  amountObj.innerHTML = $filter('slMoney')(amount, true, true);
}

 

<!-- html使用 -->
 <p>{{ plan.minInvestAmount | slMoney:true:true }}</p>

 

分享到:
评论

相关推荐

    学习AngularJS-1.x.pdf

    十、AngularJS自定义Directive * 自定义Directive:如何创建自定义的Directive * Directive命名和使用规则 * 使用templateUrl获取模板 * 让Directive动起来:link()函数的使用 十一、AngularJS Directive之间的...

    深入讲解AngularJS中的自定义指令的使用

    在实际开发中,还可以在自定义指令中处理更复杂的逻辑,比如通过作用域(Scope)与控制器(Controller)的交互来获取数据,或者利用AngularJS提供的过滤器(Filter)、指令(Directive)和动画(Animation)等功能来增强指令的...

    angularjs自定义select搜索查找插件

    在本文中,我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件,该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得构建动态Web...

    angularJs demo 各种基本用法

    在"angularJs demo 各种基本用法"中,我们可以深入探讨以下几个关键概念:路由(router)、过滤器(filter)、服务(service)以及指令(diractive)。 **路由(Router)**: AngularJS的路由功能允许我们根据URL来...

    AngularJS使用自定义指令替代ng-repeat的方法

    总结,使用自定义指令替代ng-repeat可以在处理大量数据时提供更好的性能。这种自定义方法允许我们控制数据绑定和视图更新,减少不必要的计算开销。对于AngularJS应用来说,理解和优化这类性能问题对于提升用户体验至...

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第043讲 使用$watch与$filter过滤器制作数据筛选实例.mp4 ├最新AngularJS开发宝典—第044讲 自定义过滤器之手机加星过滤器实例.mp4 ├最新AngularJS开发宝典—第045讲 SPA应用与自定义...

    angularjs常见面试题.pdf

    6. **自定义filter**: - 可以通过`app.filter`注册自定义filter,接收输入并返回处理后的结果。例如,创建一个名为`timesFilter`的filter,它将字符串重复指定次数。 7. **factory、service和provider的区别**: ...

    AngularJS视频part3.rar

    2. "22 filter-自定义过滤器.mp4":这部分内容可能会指导如何创建自定义过滤器,通过使用`filter`函数并注入到 AngularJS 应用程序中,从而实现特定的数据处理逻辑。 通过这些视频教程,学习者不仅可以了解...

    AngularJS开发下一代WEB应用

    Module是AngularJS的启动点,所有的controller、directive、service和filter等API都是定义在Module实例上的。开发者可以通过angular.module方法来创建和配置模块。 AngularJS中的双向数据绑定是其一大亮点,它允许...

    AngularJS学习笔记

    AngularJS允许开发者定义自定义的模板变量标识符,如使用`[[expression]]`替代默认的`{{ expression }}`。 #### 11. AJAX - **11.1 HTTP请求**:AngularJS内置了$http服务,可以很方便地发送HTTP请求来获取或提交...

    AngularJs 60分钟入门基础教程

    在这份60分钟入门基础教程中,会涵盖AngularJs的核心概念,包括Directive(指令)、Data Binding(数据绑定)、Filter(过滤器)和Module(模块)。掌握这些概念将有助于理解AngularJs框架的架构。 首先,AngularJs...

    AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

    总结起来,在AngularJS中,通过自定义指令结合`ng-repeat`,我们可以创建可复用的组件。当需要在这些组件中动态插入包含指令的HTML时,利用`$sce`服务的`trustAsHtml`方法,可以确保这些HTML字符串被正确解析和执行...

    AngularJS快速入门教程

    - **指令(Directive)**:指令是AngularJS中扩展HTML的一种方式。通过自定义指令,可以轻松地向HTML文档中添加新的行为。 - **过滤器(Filter)**:过滤器用于格式化数据显示给用户。例如,可以创建一个过滤器来格式化...

    前端项目-myforce-angularjs-dropdown-multiselect.zip

    要使用这个项目,开发者需要将`dropdown-multiselect.directive.js`和样式文件导入到自己的AngularJS项目中,并在HTML模板中通过适当的属性和指令来调用这个组件。例如: ```html options="yourOptionsArray" ...

    Dependency Injection with AngularJS

    2. 服务:在AngularJS中,服务(Service)是一种可复用的代码块,可以被注入到其他控制器(Controller)、指令(Directive)、过滤器(Filter)等中。 3. 提供者(Provider):提供者是用于配置依赖项的一个高级抽象...

    angularjs笔试题

    - 在 AngularJS 中,Filter 是一种用于格式化数据的方法,可以在表达式中使用。 - **示例代码**: ```javascript app.filter('timesFilter', function() { return function(item, times) { var result = ''; ...

    angularjs初学者速成笔记

    通过`angular.module()`创建模块,并使用`.controller()`, `.service()`, `.directive()`等方法定义组件。 8. **指令**:AngularJS的指令允许你扩展HTML,创建自定义的DOM行为。常见的指令有`ng-repeat`(用于迭代...

    详解AngularJS Filter(过滤器)用法

    在控制器(controller)、服务(service)和指令(directive)中也可以使用过滤器。在控制器中使用过滤器时,需要在控制器的依赖中加入过滤器的名字,然后就可以在控制器内部直接调用过滤器进行数据处理。 自定义...

    Angularjs学习文档

    自定义指令(directive)是AngularJS的高级特性,它允许开发者扩展HTML的新属性和元素。指令可以用来封装可重用的DOM结构,它们是AngularJS中最灵活的部分,可以用来创建全新的DOM元素,操作DOM属性、类、样式,以及...

Global site tag (gtag.js) - Google Analytics