angularJS1笔记-(6)-自定义过滤器

html:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
        <ul>
            
            <li ng-repeat="user in data | filterAge">
                {{user.name}}
                {{user.age}}
                {{user.city}}
            li>
        ul>
    div>
div>

<script type="text/javascript" src="../../vendor/angular/angularJs.js">script>
<script type="text/javascript" src="app/index.js">script>

<script>
script>

body>
html>

js:

angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {

    //注册service
    $provide.service('Data', function () {
        return [
            {
                name: "张三1",
                age: 21,
                city: "北京"
            },
            {
                name: "张三2",
                age: 22,
                city: "北京"
            },
            {
                name: "张三3",
                age: 23,
                city: "上海"
            },
            {
                name: "张三4",
                age: 24,
                city: "北京"
            },
        ];
    });

    //注册filter
    $filterProvider.register('filterAge', function () {
        return function (obj) {
          var newObj = [];
          angular.forEach(obj,function (o) {
              //过滤出年龄大于22岁的
             if(o.age>22){
                 newObj.push(o);
             }
          });
          return newObj;
        };
    });

    //注册controller
    $controllerProvider.register('firstController', function ($scope, Data) {
        $scope.data = Data;
    });
});

  运行结果:

angularJS1笔记-(6)-自定义过滤器_第1张图片

 补充:传多个参数的过滤器

html:




    
    自定义过滤器复习
    


{{ true | checkmark }}

{{ false | checkmark }}

体重:{{yourWeight}}kg

评测:{{yourWeight|weightFilter:"张三"}}

  执行结果:

angularJS1笔记-(6)-自定义过滤器_第2张图片

 

转载于:https://www.cnblogs.com/yk123/p/6830186.html

你可能感兴趣的:(angularJS1笔记-(6)-自定义过滤器)