angular过滤器

最新推荐文章于 2023-01-10 15:58:55 发布

Ihavebeen

最新推荐文章于 2023-01-10 15:58:55 发布

阅读量348

点赞数 1

分类专栏： angular 文章标签： angular angular过滤器过滤器

本文链接：https://blog.csdn.net/zqh862735956/article/details/70186874

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

angular的过滤器主要分为两种，一种是内置过滤器，还有一种就是自定义过滤器，在这里，我只列举一些常用的内置过滤器和自定义过滤器。

1.内置过滤器

以下js语句第一句均定义在控制器中，用法即在视图中实现,如果需要完整代码，见附录

   //1日期date
   $scope.date = new Date();

   日期{{date|date:"yyyy-MM-dd"}}

   //2货币currency
   $scope.price = 111.111;

   货币{{price|currency:'$':4}}

   //3截取字符串limitTo
   $scope.str = "I love you";
   //第一个数字参数是字符个数，第二个是从第几个索引开始截取
   字符串{{str|limitTo:4:2}}

   //4,5转换为大写uppercase,lowercase
   $scope.case= "I love you";

   转换大写字符{{case|uppercase}}
   转换小写字符{{case|lowercase}}

   //6对象转换字符串json
   $scope.obj="{username:'zhangsan'}";

   对象转换字符串{{obj|json}}

   //7数据搜索filter
   $scope.arr=["my","name","age","gender"];
   //对象搜索
   $scope.obj2=[
        {"username":"zhangsan"},
        {"username":"lisi"},
        {"username":"wangwu"}
   ]

   字符搜索{{arr|filter:'m'}}
   <!--下面的w}后面的空格必须写-->
   对象搜索{{obj2|filter:{"username":"w"} }}

   //8排序orderBy
   $scope.arr2=[10,22,44,33];

   <!--""表示被排序的字段,在对字段排序时候使用-->
   <!--true表示从大到小排序-->
   排序{{arr2|orderBy:"":true}}

   //9精确小数number
   $scope.num=111.111;

   精确{{num|number:1}}

2自定义过滤器

   //例1：返回首字母大写的过滤器
   /*定义过滤器*/
   App.filter("Capililize",function(){

      /*
       * 这里有一个默认的参数,默认的参数就是要调用当前过滤器的数据.
       * */
      return function(arg,arg1){
          //console.log(arg);
          /*我想把itcast ====》 Itcast*/
          return arg[0].toUpperCase()+arg.slice(1)+arg1;
         }
    });

   //例2：字符串倒叙
   App.filter("reverse",function(){
       return function(arg){
          return arg.split("").reverse().join("");
       }
   });

注意：在使用自定义过滤器之前，需要将过滤器进行注入才能使用，此方法类似于在模块化中加入依赖项

附录：

内置过滤器代码(全)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myController", ["$scope", function ($scope)       {

            $scope.date = new Date();

        }])
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    日期{{date|date:"yyyy-MM-dd"}}
</body>
</html>

Ihavebeen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular过滤器

angular的过滤器主要分为两种，一种是内置过滤器，还有一种就是自定义过滤器，在这里，我只列举一些常用的内置过滤器和自定义过滤器。1.内置过滤器以下js语句第一句均定义在控制器中，用法即在视图中实现,如果需要完整代码，见附录 //1日期date $scope.date = new Date(); 日期{{date|date:"yyyy-MM-dd"}} //2货币currency
复制链接

扫一扫

专栏目录