过滤器详解

来源：互联网发布：linux net snmp安装包编辑：程序博客网时间：2024/05/20 05:10

<!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>

阅读全文

0 0