自定义过滤和全局过滤

作者: lovelydong | 来源:发表于2017-09-28 20:56 被阅读0次

vue filter 过滤器使用
04-Vue中的过滤器
vue自定义过滤器
自定义过滤和全局过滤
vue.js过滤器的基本使用
vue的过滤器
过滤器
Vue进阶（1）
过滤器
21、vue中的过滤器

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            color : red;
        }
    </style>
    <script src="js/angular-1.5.8.min.js"></script>
</head>
<body>
    <div ng-controller="myCon">
        <!--{{books | filter : '101'}}-->
        {{books | filter : myFilter}}
        {{books | myFilter2}}
        <button ng-click="sayHello($event)">点击</button>
    </div>
    <!--<button onclick="sayh(event)">按钮</button>-->
</body>
<script>
//    function box(){}
//    var box = function(){}
//    function sayh(e){
//        alert(e.target)
//    }
    var myApp = angular.module("myApp",[]);
//    全局过滤
    myApp.filter("myFilter2",function () {
        return function(data){
//            console.log(data);
            console.log(data.slice(0,2))
            return data.slice(0,2)
        }
    })
    myApp.controller("myCon",["$scope",function($sc){
                $sc.books = [
                    {
                        "id":100,
                        "name":"javascript",
                        "price":50,
                        "num":100
                    },{
                        "id":101,
                        "name":"php",
                        "price":50,
                        "num":50
                    },{
                        "id":102,
                        "name":"jquery",
                        "price":40,
                        "num":80
                    }
                ]
               $sc.myFilter = function(data){
//                console.log(data);
                   if(data.name.indexOf('php') != -1){
                       return data;
                   }
               }
               $sc.sayHello = function (e) {
//                   alert(e);//事件对象
//                   alert(e.target);//事件对象作用的目标  dom对象
                   var jq = angular.element;
                   jq(e.target).addClass("box");
               }
            }]);
</script>
</html>