过滤器详解

原创

待？？？的一天 2023-02-06 18:12:00 博主文章分类：angularjs ©著作权

文章标签 angularjs filter html angular.js bc 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者待？？？的一天的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("uppercaseController",["$scope",function($scope){
            $scope.person = {
                "Name":"Da Hua Xi You 2",
                "age":"15"
            }
        }]);

        app.controller("lowercaseController",["$scope",function($scope){
            $scope.person = {
                "Name":"Da Hua Xi You 2",
                "age":"15"
            }
        }]);

        app.controller("costController",function($scope){  //货币的显示
            $scope.quantity = 1;
            $scope.price = 9.99;
        });

        app.controller('namesController',function($scope){
            $scope.names = [
                {name:'Jani',country:'Norway'},
                {name:'Hege',country:'Sweden'},
                {name:'Kai',country:'Denmark'}
            ];
            $scope.jsonText={foo:"bar",baz:23};
        });


        app.controller('namesFilterController',function($scope){
            $scope.names = [
                {name:'Jani',country:'Norway'},
                {name:'Hege',country:'Sweden'},
                {name:'Kai',country:'Denmark'}
            ];
        });




    </script>
</head>
<body ng-app="myApp">

    <!-- 向表达式添加过滤器：可以通过一个管道字符(|)和一个过滤器添加到表达式中-->
    <!-- 字符串转化为大小写 -->
    <div ng-controller="uppercaseController">
        <p>转化为大写:{{person.Name | uppercase}}</p>
    </div>

    <div ng-controller="lowercaseController">
        <p>转化为小写:{{person.Name | lowercase}}</p>
    </div>

    <div ng-controller="costController">
        数量：<input type="number"  ng-model="quantity" min="1" step="0.01"> <!--  step是控制小数的位数 0.01代表两位小数  0.001代表三位小数 min控制最小的位数-->
        价格：<input type="number" ng-model="price">
        <p>总价 = {{ (quantity * price) | currency }}</p>
        {{250 |currency:"RMB ￥"}}
    </div>

    <div ng-controller="namesController">
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">  <!-- orderBy 排序  -->
                {{x.name + "," + x.country}}
            </li>
        </ul>

        {{jsonText | json}} <br /> <!--json格式过滤  -->
        {{13215615646 | date:'yyyy-MM-dd HH:mm:ss'}} <br /> <!-- date格式过滤 -->
        {{"Da Hua Xi You 2" | limitTo:6}} <br />  <!--取出前6个元素  -->
        {{"Da Hua Xi You 2" | limitTo:-6}}<br />  <!--取出后6个元素  -->

        <!--对象排序：降序-->
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'id':true }}<br/>
        <!--对象排序：升序-->
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | orderBy:'id' }}
    </div>

    <p>按输入的字母显示对象：</p>
    <div ng-controller="namesFilterController">
        <p>输入过滤：</p>
        <p><input type="text" ng-model="name"></p>
        <ul>
            <li ng-repeat="x in names | filter:name | orderBy:'country':true">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
        <p>name筛选：</p>
        <ul>
            <li ng-repeat="x in names | filter:{'name':name} | orderBy:'country':true">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>

        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm"},
        {"age": 44,"id": 12,"name": "test abc"}
        ] | filter:{'name':'sunm'} }}
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        /*
          在控制器中使用过滤器
        */
        var app = angular.module("myApp",[]);
        app.controller("myControl",function($filter,$scope){
           var date =  $filter('date')(new Date()); //不指定格式
            $filter('date')(new Date(), 'fullDate');
            date = $filter('date')(new Date(),"yyyy-MM-dd"); //指定格式的日期初始化

            $scope.dates =[
                {"id":1,"add":"Baidu.com","title":"百度"},
                {"id":2,"add":"Ali.com","title":"阿里"},
                {"id":3,"add":"WangYi.com","title":"网易"}
            ];

            var dates = $filter('orderBy')($scope.dates,'id',true);  //在过滤器中的排序  true代表降序   false代表升序  也可以不加
//            alert($scope.dates);
              for(var i=0;i<dates.length;i++){
              //  alert("id:" + dates[i].id + "add:" + dates[i].add + "title:" + dates[i].title);
            }


            //$scope.cPrice=$filter('currency')(123,'RMB ￥');

            // alert($filter('uppercase')("sdsgdgdf"));



        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myControl">



</body>
</html>

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>
<body ng-controller="myController">

<div>
    <input type="text" ng-model="name" ng-change="changeVal()" placeholder="请输入">

    <ul>
        <li>{{array | myFilter}}</li>
    </ul>

</div>


</body>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('myController',function($scope,$rootScope){
        /**
         * 自定义了一个数据源数组
         * @type {*[]}
         */
        $scope.array = [
            {'name':'aaa'},{'name':'bbb'},{'name':'ccc'},{'name':'ddd'},{'name':'eee'},{'name':'ddd'},{'name':'fff'},{'name':'ggg'},{'name':'hhh'}
        ];
        /**
         * 初始化输入框为空
         */
            // iuput里的值
        $scope.name = '';
        $scope.changeVal = function(){
            //将本地作用域的值赋给全局作用域
            $rootScope.name = $scope.name;
        }
    });

    //自定义过滤器
    app.filter('myFilter',function($rootScope){
        /**
         * 这里的obj参数，就是需要过滤的数组
         */
        return function(obj){
            //创建一个新的数组为空
            var objArray = [];
            angular.forEach(obj,function(data){
                console.log(data);
                if (data.name == $rootScope.name){
                    objArray.push(data.name);
                }
            });
            return objArray.toString();

        }

    });



</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.filter("replaceHello",function(){
            return function(input,n1,n2){ //分别代表|后面的三个参数  分割用:
                console.log(input);
                console.log(n1);
                console.log(n2);
                return input.replace(/Hello/,"您好");
            }
        });
    </script>
</head>
<body ng-app="myApp">
    {{"Hello AngularJs" | replaceHello}}
    <!--{{"Hello AngularJs" | replaceHello:3:5}}-->
</body>
</html>