AngularJS 过滤器

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

AngularJS 过滤器

AngularJS 过滤器可用于转换数据

过滤器 描述
currency 格式化数字为货币格式
filter 从数组项中选择一个子集
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写

在表达式中添加过滤器

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

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

    <!DOCTYPE html>
    <meta charset="utf-8">
    <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>姓名为 {{ firstName + " " + lastName | uppercase }}</p>
    </div>
    <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.firstName = "Li";
    $scope.lastName = "Bai";
    });
    </script>
    

    运行范例 »

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

    <!DOCTYPE html>
    <meta charset="utf-8">
    <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>姓名为 {{ firstName + " " + lastName | lowercase }}</p>
    </div>
    <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.firstName = "Li";
    $scope.lastName = "Bai";
    });
    </script>
    

    运行范例 »

  3. currency 过滤器

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

    <!DOCTYPE html>
    <meta charset="utf-8">
    <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl">
        <input type="number" ng-model="quantity">
        <input type="number" ng-model="price">
        <p>总价 = {{ (quantity * price) | currency }}</p>
    </div>
    <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.quantity = 10
        $scope.price = 13.3
    });
    </script>
    

    运行范例 »

  4. orderBy 过滤器

    orderBy 过滤器根据表达式排列数组

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

    <!DOCTYPE html>
    <meta charset="utf-8">
    <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <ul>
          <li ng-repeat="x in names | orderBy:'country'">
            {{ x.name + ', ' + x.province }}</li>
        </ul>
    </div>
    <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
    <script>
        angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.names = [
                {name:'永定土楼',province:'福建'},
                {name:'都江堰',province:'四川'},
                {name:'凤凰古城',province:'湖南'}
            ];
        });
    </script>
    

    运行范例 »

  5. filter 过滤器

    filter 过滤器从数组中选择一个子集

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

    <!DOCTYPE html>
    <meta charset="utf-8">
    <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <p><input type="text" ng-model="test"></p>
        <ul>  <li ng-repeat="x in names | 
    filter:test | orderBy:'province'">    {{ (x.name | uppercase) + ', ' + x.province }}  </li></ul>
    </div>
    <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
    <script>
        angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.names = [
                {name:'永定土楼',province:'福建'},
                {name:'都江堰',province:'四川'},
                {name:'凤凰古城',province:'湖南'}
            ];
        });
    </script>
    

    运行范例 »

自定义过滤器

下面的代码自定义了一个过滤器 reverse 用于将字符串反转

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<div ng-app="myApp" ng-controller="myCtrl">
站点: {{ msg | reverse }}
</div>
<footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
    $scope.msg = "简单教程";
});
app.filter('reverse', function() {
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

运行范例 »

学习 AngularJS

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.