zoukankan      html  css  js  c++  java
  • Angular——自定义过滤器

    基本介绍

    除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器。

    基本使用

    (1)input是将绑定的数据以参数的形式传入

    (2)input后面的参数也就是:后面的参数,指导在视图时候该如何传递参数

    (3)filter方法的回调函数将函数作为返回值,最后这个函数会在视图中进行调用,并且返回值

    App.filter('demo', function () {
        return function (input, arg) {
          return input + ' Hello ' + arg;
        }
    });
    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../libs/angular.min.js"></script>
    </head>
    <body>
    <div ng-controller="DemoController">
        <span>{{name|demo:123}}</span><br>
        <span>{{text|capitalize}}</span>
    </div>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', function ($scope) {
            $scope.name = 'wqx';
            $scope.text = 'hello world';
        }]);
        App.filter('demo', function () {
            return function (input, arg) {
                return input + ' Hello ' + arg;
            }
        });
        App.filter('capitalize', function () {
            return function (input) {
                return input[0].toUpperCase() + input.slice(1);
            }
        });
    </script>
    </body>
    </html>
    //返回值
    wqx Hello 123
    Hello world
  • 相关阅读:
    i++ 与++i
    jquery下的domcument
    jquery
    MVC MVP MVVM
    两个for还是一个for?
    华为云服务器FTP连接
    vue-i18n 使用方法
    在本地运行vue build 文件
    vue项目中使用模拟数据 MOCK
    超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8413020.html
Copyright © 2011-2022 走看看