zoukankan      html  css  js  c++  java
  • ng 自定义过滤器的创建和使用

    过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值。

    ①过滤器创建
    var app = angular.module();
    app.filter(‘名称’,func)//创建过滤器
    在filter的第二参数,是一个方法,返回的是过滤器方法(有返回值)
    app.filter('customFilter', function () {
    return function (value,arg1) {
    console.log(value,arg1);
    return '$'+value;
    }
    });
    ②调用过滤器(与自带过滤器用法一致)
    {{ price | customFilter }}

    效果:

    代码:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
      <meta charset="UTF-8">
      <script src="js/angular.js"></script>
      <title></title>
    </head>
    <body>
    <div ng-controller="myCtrl">
      <p>{{price}}</p>
      <p>{{price | customFilter:'¥'}}</p>
    </div>
    <script>
      var app = angular.module('myApp', ['ng']);
    
      //创建过滤器(过滤器的本质就是方法)
      app.filter('customFilter', function () {
        return function (value,arg1) {
          console.log(value,arg1);
          return '$'+value;
        }
      });
    
      app.controller('myCtrl', function ($scope) {
        console.log('myCtrl  func is called');
        $scope.price = 100;
      })
    </script>
    </body>
    </html>

    2.自定义大写转换的过滤器

    ①创建过滤器
    给过滤器定义方法
    toUppercase()
    ②调用

    效果:

    代码:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
      <meta charset="UTF-8">
      <script src="js/angular.js"></script>
      <title></title>
    </head>
    <body>
    <div ng-controller="myCtrl">
      <h1>{{name | myUppercase}}</h1>
    </div>
    <script>
      var app = angular.module('myApp', ['ng']);
    
      //创建自定义的过滤器
      app.filter('myUppercase', function () {
        return function (value) {
          //实现对输入的处理
          //返回,显示出来
          return value.toUpperCase();
        }
      });
    
      app.controller('myCtrl', function ($scope) {
        $scope.name = "Jack";
      })
    </script>
    </body>
    </html>
  • 相关阅读:
    Java异常处理和设计
    一次qps测试实践
    Alternate Task UVA
    Just Another Problem UVA
    Lattice Point or Not UVA
    Play with Floor and Ceil UVA
    Exploring Pyramids UVALive
    Cheerleaders UVA
    Triangle Counting UVA
    Square Numbers UVA
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6953741.html
Copyright © 2011-2022 走看看