`

AngularJs 过滤器

js 
阅读更多

Angular过滤器

主要用来格式化输出表达式的值。过滤器可以用于视图模板、控制器或者服务组件中。我们可以通过Angular的api轻松的实现过滤器。

表达式中添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中

 如何在模板中使用过滤器 

 

 

{{ expression | filter }}
 

 

  例如:

 

  {{ 12 | currency }} 将会以货币格式输出 $12.00, currency是Angular提供的过滤器。
 还可以将多个过滤器联合使用, 
{{ expression | filter1 | filter2 | ... }}  
 过滤器可支持参数
{{ expression | filter:argument1:argument2:... }}  

uppercase过滤器将字符串格式化为大写

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

 lowercase过滤器将字符串格式化为小写:

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

 currency过滤器将数字格式化为货币格式:

<div ng-app="myApp" ng-controller="costCtrl">

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
    $scope.quantity = 1;
    $scope.price = 9.99;
});
</script>
//总价=$9.99

 

自定义过滤器

//创建一个sqhApp模块  
var app = angular.module("sqhApp",["ionic"], function($httpProvider) {});  
  
//sqhApp模块下创建一个过滤器replaceStr,filter的第二个参数方法是没有任何参数的  
angular.module("sqhApp").filter('replaceStr', function () {  
  
     // input 前一个命令的输入,需要处理的字符串 
     //startNum 第一个字符串的起始位置 
     // endNum 最后一个字符串的位置 
     // charCode 被替换字母 
     
    return function (input, startNum, endNum, charCode) {  
        //如果没有数据的时候,则返回空字符串  
        if (input == undefined || input == "") {  
            return "";  
        }  
        //没有指定隐藏显示的类型,则默认是*  
        if (charCode == undefined || charCode == "") {  
            charCode = "*";  
        }  
        var strArray = input.split("");  
        //console.log(strArray);  
        for (var i = startNum - 1; i < endNum; i++) {  
            strArray[i] = charCode;  
        }  
        return strArray.join("");  
    }  
  
})  

 

 

 

 

 

分享到:
评论

相关推荐

    AngularJS过滤器filter

    **AngularJS过滤器filter详解** AngularJS是一款强大的前端JavaScript框架,用于构建动态Web应用程序。过滤器是AngularJS中一个至关重要的特性,它允许我们在数据展示时进行格式化和转换,从而提升用户体验。过滤器...

    详解AngularJS过滤器的用法_.docx

    详解 AngularJS 过滤器的用法 AngularJS 过滤器是用来格式化需要展现给用户的数据的强大工具。 AngularJS 提供了许多内置的有用的过滤器,同时也允许开发者自己编写过滤器。在 HTML 模板中,可以通过使用 {{ }} ...

    angularjs过滤器--filter与ng-repeat配合有奇效

    在介绍AngularJS过滤器-filter与ng-repeat的配合使用时,我们首先需要了解这两个指令在AngularJS框架中所扮演的角色。AngularJS是一个开源的前端框架,由Google支持,广泛用于开发动态Web应用程序。它通过引入双向...

    AngularJS 过滤器(自带和自建)详解

    AngularJS中过滤器的作用是格式化需要展示给用户的数据。在AngularJS的HTML模板绑定中,我们通过在绑定符号{{}}内使用|符号调用过滤器。例如,{{value|lowercase}}这样的表达式可以将值转换成小写。除了在HTML模板中...

    Angularjs过滤器使用详解

    总之,AngularJS过滤器是数据呈现和处理的关键工具,它们帮助开发者将原始数据转化为适合用户阅读的形式,同时也方便在业务逻辑中进行数据筛选和转换。熟练掌握过滤器的使用,能极大地提升AngularJS应用的用户体验和...

    AngularJS过滤器filter用法分析

    AngularJS过滤器(filter)是AngularJS框架中用于数据处理和格式化的重要工具,它可以方便地在视图层对数据进行转换、筛选和排序。在实际的开发中,过滤器通常用于解决数据呈现前的格式化问题,例如将数字转换为人类...

    AngularJS 过滤器的简单实例

    AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...

    AngularJS 过滤器

    AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...

    详解AngularJS 过滤器的使用

    本文将深入探讨AngularJS过滤器的使用方法,以及在特定场景下的应用策略。 过滤器的本质是一个接收输入并返回处理后的输出的方法。在我们的示例中,有一个名为`yunzhiComputer`的过滤器,它接收用户和计算机名称...

    AngularJS过滤器filter用法实例分析

    AngularJS过滤器(filter)是AngularJS框架中的一个重要特性,用于转换和格式化数据,以适应用户界面的显示需求。过滤器可以在视图层(View)中直接使用,也可以在控制器(Controller)或表达式中应用。它们允许...

    angularjs-filters:AngularJS 过滤器

    **AngularJS 过滤器详解** AngularJS 是一个强大的 JavaScript 框架,它通过数据绑定和依赖注入简化了前端开发。在 AngularJS 中,过滤器(Filters)是一种功能强大的工具,它们可以用来转换和格式化视图中的数据,...

    AngularJS过滤器详解及示例代码

    总的来说,AngularJS过滤器是提升用户体验、增强数据展示的重要工具。通过灵活运用过滤器,开发者可以轻松地实现数据的格式化、筛选和排序,使应用程序更加直观和用户友好。在编写AngularJS应用时,理解并熟练掌握...

    详解AngularJS过滤器的使用

    总结来说,AngularJS过滤器是一种非常实用的工具,它简化了数据的格式化过程,让我们可以以非常简洁的方式在视图中展示经过处理的数据。无论是内置的过滤器,还是用户自定义的过滤器,都可以通过简单的语法直接应用...

    AngularJS过滤器filter用法总结

    AngularJS过滤器是AngularJS框架中用于数据转换和格式化的一种功能强大的工具,它们能够接收原始数据,并根据预设的规则进行处理,然后输出格式化后的结果。在AngularJS中,过滤器通常与表达式一起使用,通过管道符 ...

    Angularjs过滤器实现动态搜索与排序功能示例

    本文将详细探讨AngularJS过滤器实现动态搜索与排序功能的示例。过滤器是AngularJS中用于转换数据的指令,能够在不改变原始数据的情况下,转换数据的显示格式。在本文的示例中,过滤器用于根据用户输入动态筛选和排序...

    深入理解angularjs过滤器

    AngularJS 是一个基于 JavaScript 的开源前端框架,它通过数据绑定、依赖注入、DOM 操作以及过滤器等概念来简化和加速 Web 应用程序的开发。AngularJS 中的过滤器(Filters)是一种强大的数据处理机制,它用于对数据...

Global site tag (gtag.js) - Google Analytics