angularjs怎么将字符串格式化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs怎么将字符串格式化相关的知识,希望对你有一定的参考价值。

AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。

AngularJS 过滤器可用于转换数据:

currency 格式化数字为货币格式。

filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

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

uppercase 过滤器将字符串格式化为大写:
AngularJS 实例
<div ng-app="myApp" ng-controller="personCtrl">

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

</div>

2.lowercase 过滤器将字符串格式化为小写:
AngularJS 实例
<div ng-app="myApp" ng-controller="personCtrl">

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

</div>
参考技术A 直接用js就行了。encordURI()

AngularJS 之 过滤器 Filter

一、内置过滤器

  1、大小写转换:

  uppercase、lowercase
 {{"lower cap string"| uppercase }}
 {{"Tank Is GOOD"| lowercase}}  

  2、json格式化(将对象转换成json字符串),默认输出就是json字符串:

    {{ {name:‘zhangsan‘,age:15} }}  
    {{ {name:‘zhangsan‘,age:15}|json }}  

  3、number格式化:

    {{1.2345|number:1}}    // 1.2

    {{1.2345|number:3}}    // 1.235

    {{1234567|number}}    // 1,234,567

  4、currecy货币格式化:

    {{500|currency}}          // $500.00 

    {{250|currency:‘RMB ¥ ‘}}    // RMB ¥ 250.00

  5、date格式化:

    var app = angular.module(‘myApp‘, []);  
    app.controller(‘myCtrl‘, function ($scope) {  
        $scope.dateOne = new Date();  
        console.info(new Date().toJSON());  
        $scope.dateTwo = new Date().toJSON();  
        // /Date(1464941268937)/  
        $scope.dateThree = ‘1464941268937‘;  
    });  

  

    {{ 1304375948024 |date}}       // May 3, 2011 

    {{ dateOne |date:‘hh:mm:ss‘}}    // 09:19:20

    {{ dateTwo |date:‘yyyy-MM-dd hh:mm:ss‘}}    // 2017-09-19 09:19:20

    {{ dateThree |date:‘yyyy年MM月dd日‘}}      // 2016年06月03日

  6、filter查找:

    //查找含有有4的行  

    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}]  
     | filter:‘4‘ }}  

    //查找name含有iphone的行  

    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}]   
    | filter:{‘name‘:‘iphone‘} }}  

  

    //查找含有有4的行 
    [{"age":44,"id":12,"name":"test abc"}] 

    //查找name含有iphone的行 
    [{"age":20,"id":10,"name":"iphone"}]

  7、limitTo 字符串或对象的截取:

    {{‘i want you‘| limitTo:3}}    // i w

    {{‘i want you‘| limitTo:-3}}    // you

    {{[1,3,5]|limitTo:1}}        // [1]
 
    {{[1,3,5]|limitTo:-1}}       // [5]

  8、orderBy 对象排序:

    //根据id降序排    
  
    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}]   
    | orderBy:‘id‘:true }}       

    //根据id升序排    

    {{[{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}]   
    | orderBy:‘id‘}}           

  

    //根据id降序排 
    [{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}]

    //根据id升序排 
    [{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

  

二、自定义过滤器

  

    var app = angular.module(‘myApp‘, []);
    app.controller(‘myCtrl‘, function($scope) {
        $scope.msg = "Runoob";
    });
    app.filter(‘reverse‘, function() { //可以注入依赖
        return function(text) {
            return text.split("").reverse().join("");
        }
    });

  

 

以上是关于angularjs怎么将字符串格式化的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 之 过滤器 Filter

[angularjs] angularjs系列笔记过滤器

通过数组的AngularJS 1.6返回对象数据

AngularJS 过滤器

AngularJS学习之旅—AngularJS 过滤器

angularJS - 过滤器