美文网首页
AngularJS 过滤器

AngularJS 过滤器

作者: what__ | 来源:发表于2017-07-22 20:29 被阅读0次
<body ng-controller="myController">
        <h2>{{price}}</h2>
        <h2>{{price | currency}}</h2>
        <h2>{{price | currency:"人民币"}}</h2>
        <h2>{{str | lowercase}}</h2>
        <h2>{{str | uppercase}}</h2>
        <h2>{{date}}</h2>
        <h2>{{date|date}}</h2>
        <h2>{{date|date:"y-MM-dd HH:mm:ss a"}}</h2><hr>

        <!--<h3 ng-repeat="item in items | limitTo:2">{{item.name}}</h3>-->
        <!--<h3 ng-repeat="item in items | orderBy:'price':true">{{item.name+"---"+item.price}}</h3>-->
        <hr>
        <select ng-model=orderKey>
            <option value="name">按名称排列</option>
            <option value="price">按价格排列</option>
        </select>
        <input type="checkbox" name="" value="" ng-model="isDown">升/降序
        <input type="text" name="" value="" ng-model="searchKey">
        <!--<h3 ng-repeat="item in items | orderBy:orderKey:isDown">{{item.name+"---"+item.price}}</h3>-->
        <!--<h3 ng-repeat="item in items | orderBy:orderKey:isDown | filter:searchKey">{{item.name+"---"+item.price}}</h3>-->
        <hr>
    
        {{"str" | myFilter}}
        {{[2,3,4,5] | myFilter2}}
        <h3 ng-repeat="item in items | myFilter3:searchKey">{{item.name}}</h3>
    
    
    </body>
    <script>
        angular.module("myApp",[])
        .controller("myController",["$scope",function($scope){
            $scope.price = 4999;
            $scope.str = "Hello Angular!!!";
            $scope.date = new Date();
            $scope.items = [{
                name:"iphone1",
                price:5000
            },{
                name:"小米",
                price:2000
            },{
                name:"iphone5",
                price:3000
            },{
                name:"红米",
                price:400
            }]
        }])
        .filter("myFilter",function(){
            return function(val){
                console.log(val)
                //return val.toUpperCase()
                return  val =="str"?"low爆了":"蛋蛋"
             }
        })
        .filter("myFilter2",function(){
            return function(val){
                console.log(val)
                var arr = val.map(Math.sqrt)
                return arr
            }
        })
        .filter("myFilter3",function(){
            return function(val,arg1){
                console.log(val)
                var arr = [];
                val.forEach(function(item){
                    if(item.name.indexOf(arg1)!=-1){
                        arr.push(item);
                    }
                })
                return arr;
            }
        })

        // 内置过滤器
        //currency货币转换
        //currency:"前缀"  更改指定的前缀 默认为$
        //lowercase/uppercase 大小写转换
        //date 日期格式化
        //y年 M月 d日 H 24小时 h 12小时 m分钟 s秒
        //数组过滤器:
        //limitTo限制结果条数 如:limitTo:2 显示两条
        //orderBy 排序
            //orderBy:orderKey 按orderKey升序排列ordeBy:orderKey:true  按orderKey姜旭排列
        //filter:按关键字快速过滤
            //filter:searchKey过滤所有数据包括searchKey 的内容

    </script>
</html>```

相关文章

网友评论

      本文标题:AngularJS 过滤器

      本文链接:https://www.haomeiwen.com/subject/dqxskxtx.html