angularJS的过滤器

最新推荐文章于 2020-08-07 16:42:08 发布

梦无悔

最新推荐文章于 2020-08-07 16:42:08 发布

阅读量331

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u014444571/article/details/71515485

版权

angularjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS的过滤器</title>
        <script src="js/Angular.js"></script>
    </head>
    <body>
        <div ng-app="filterApp" ng-controller="filterController">
            <div>
                <h4>实例：转换为大写</h4>
                你的姓是：{{firstName | uppercase}}
            </div>
            <div>
                <h4>实例：数字格式化为货币格式：</h4>
                你今天一共花费了：{{num1*num2 | currency}}
            </div>
            <div>
                <h4>实例：排序过滤：</h4>
                <ul>
                    <li ng-repeat="x in names | orderBy:'country'">
                        {{x.name}}　{{x.country}}
                    </li>
                </ul>
                <span style="color: red;">
                    注意： 排序过滤器为：orderBy 不要漏写By ，在后面的按照某个列排序列名需要使用'  '括起来，默认按照升序排序，如果想使用降序排休可以写成orderBy:'country':true
                </span>
            </div>
            <div>
                <h4>自定义过滤器：字符串反转并大写</h4>
                {{firstName | reverse | uppercase}}
            </div>

            <div>
                <h4>时间过滤器</h4>
                {{1490161945000  | date:"yyyy-MM-dd HH:mm:ss"}}
            </div>
            <div>
                <h4>filter查找</h4>
                {{ [{"age": 20,"id": 10,"name": "iphone"},
                    {"age": 12,"id": 11,"name": "sunm xing"},
                    {"age": 44,"id": 12,"name": "test abc"}
                    ] | filter:{'name':'iphone'} 
                }}    
            </div>
            <script>
                var app = angular.module("filterApp",[]).controller("filterController",function($scope){
                    $scope.firstName="yilisob";
                    $scope.num1 = "1000";
                    $scope.num2 = "2";
                    $scope.names = [
                    {name:'Jani',country:'Norway'},
                    {name:'Hege',country:'Sweden'},
                    {name:'Kai',country:'Denmark'}
                     ];
                });
                //自定义过滤器
                app.filter("reverse",function(){
                     return function(text) {
                        return text.split("").reverse().join("");
                    }
                })

            </script>
        </div>
        <hr />
        <div>
            <h3>过滤器解释</h3>
            AngularJS 　过滤器可用于转换数据：<br />
            <span style="color: red;">
            过滤器　　　　描述(格式)</span><br />
            currency　　格式化数字为货币格式。{{ 250 | currency:"RMB ￥ " }}自定义格式化货币显示样式<br />
            filter从　　　数组项中选择一个子集。<br />
            lowercase　 格式化字符串为小写。<br />
            orderBy　　 根据某个表达式排列数组。<br />
            uppercase　 格式化字符串为大写。<br />
            date　　　　时间格式化：{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}<br />
            number　　　数值格式化：{{149016.1945000 | number:2}}保留两位小数<br />
            filter　　　filter查找<br />
            limitTo　　截取{{"1234567890" | limitTo :6}}  从前面开始截取6位  {{"1234567890" | limitTo:-4}} // 从后面开始截取4位<br />
            orderBy　　排序:orderBy:'id':true 按id降序排序  orderBy:'id'按id升序排序(默认)<br />
            <br />
        </div>

        <div>
            <h3>使用过滤器</h3>
            过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。<br />
            可同时添加多个过滤器，同样使用（|）隔开
        </div>

        <div>
            <h3>自定义过滤器</h3>
            使用应用程序app 的filter方法，第一个参数为过滤器名称，第二个为自定义过滤方法
            app.filter('reverse', function(){

            })
        </div>
    </body>
</html>