AngularJs过滤器

Posted 老街_hehe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs过滤器相关的知识,希望对你有一定的参考价值。

AngularJS过滤器

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

过滤器                                              描述

lowercase                                         格式化字符串为小写

uppercase                                        格式化字符串为大写

currency                                          格式化数字为货币格式

orderBy                                           根据某个表达式排列数组

filter                                               从数组项中选择一个子集

date                                                日期格式化(date:"yyyy-MM-dd HH:mm:ss")

number                                           保留小数

limitTo                                            截取 

过滤管道     |

表达式中添加过滤器

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

    <div ng-app="myApp" ng-controller="namesCtrl">
        <p>{{sex | uppercase}}</p>
        <ul>
            <li ng-repeat="x in names">
                {{x.name + "," +x.country}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>
angular.module("myApp",[]).controller("namesCtrl",function($scope){
    $scope.names = [
        {name:"Jani",country:"Norway"},
        {name:"Hege",country:"Sweden"},
        {name:"Kai",country:"Denmark"}
    ];
    $scope.sex = "boy";
})

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

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

<div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>总价 = {{(quantity*price) | currency}}</p>
        <!--$138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names">
                {{x.name + "," +x.country}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

向指令添加过滤器

过滤器可以通过一个管道字符|和一个过滤器添加到指令中,该过滤器后可以跟一个冒号和一个模型名称

 

orderBy(根据id升序排列)

    <div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>总价 = {{(quantity*price) | currency}}</p>
        <!--$138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names | orderBy:‘id‘">
                {{(x.name | uppercase) + "," +x.country + "," + x.id}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>
angular.module("myApp",[]).controller("namesCtrl",function($scope){
    $scope.names = [
        {name:"Jani",country:"Norway",id:"3"},
        {name:"Hege",country:"Sweden",id:"1"},
        {name:"Kai",country:"Denmark",id:"2"}
    ];
    $scope.sex = "boy";
    $scope.price = "23.0";
    $scope.quantity = "6";
})

orderBy(根据id倒序排列)

<div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>总价 = {{(quantity*price) | currency}}</p>
        <p>总价 = {{(quantity*price) | currency:"RMB ¥"}}</p>
        <!--$138.00-->
        <!--RMB ¥138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names | orderBy:‘id‘:true">
                {{(x.name | uppercase) + "," +x.country + "," + x.id}}
            </li>
        </ul>
        <!--自定义过滤器-->
        <p>{{msg | reverse}}</p>
        <!--频调乐音我酷-->
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

自定义过滤器

以下实例自定义一个过滤器reverse,将字符串反转:

<div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>总价 = {{(quantity*price) | currency}}</p>
        <p>总价 = {{(quantity*price) | currency:"RMB ¥"}}</p>
        <!--$138.00-->
        <!--RMB ¥138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names | orderBy:‘id‘">
                {{(x.name | uppercase) + "," +x.country + "," + x.id}}
            </li>
        </ul>
        <!--自定义过滤器-->
        <p>{{msg | reverse}}</p>
        <!--频调乐音我酷-->
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>
var app = angular.module("myApp",[]);
app.controller("namesCtrl",function($scope){
    $scope.names = [
        {name:"Jani",country:"Norway",id:"3"},
        {name:"Hege",country:"Sweden",id:"1"},
        {name:"Kai",country:"Denmark",id:"2"}
    ];
    $scope.sex = "boy";
    $scope.price = "23.0";
    $scope.quantity = "6";
    $scope.msg = "酷我音乐调频";
})
// 自定义过滤器reverse
app.filter("reverse",function(){//可以注入依赖
    return function (text){
        return text.split("").reverse().join("");
    }
})

date格式化

    <div ng-app="myApp" ng-controller="namesCtrl">
       {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
    </div>
    
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

 <!--2017-03-22 13:52:25-->

number格式化(保留小数)

    <div ng-app="myApp" ng-controller="namesCtrl">
       {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
       {{149016.1945000 | number:2}}
       <!--2017-03-22 13:52:25-->
       <!--149,016.19-->
    </div>

filter查找

从数组项中选择一个子集(查找id:3的行)

  <div ng-app="myApp" ng-controller="namesCtrl">
        {{ names | filter:{‘id‘:‘3‘} }}
        <!--[{"name":"Jani","country":"Norway","id":"3"}]-->
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>
  var app = angular.module("myApp",[]);
  app.controller("namesCtrl",function($scope){
      $scope.names = [
          {name:"Jani",country:"Norway",id:"3"},
          {name:"Hege",country:"Sweden",id:"1"},
          {name:"Kai",country:"Denmark",id:"2"}
      ];
      $scope.sex = "boy";
      $scope.price = "23.0";
      $scope.quantity = "6";
      $scope.msg = "酷我音乐调频";
  })

limitTo截取

    <div ng-app="myApp" ng-controller="namesCtrl">
        <!--从前面开始截取前6位-->
        {{"1234567890" | limitTo :6}}
        <!--从后面开始截取后6位-->
        {{"1234567890" | limitTo :-6}}
    </div>

 

以上是关于AngularJs过滤器的主要内容,如果未能解决你的问题,请参考以下文章

我应该在哪里编写 angularjs 中的 cors 过滤器启用代码

AngularJS过滤器

AngularJS的过滤器示例

angularjs之filter过滤器

AngularJS 讲解,三 过滤器

AngularJS过滤器