Angular——自定义过滤器

最新推荐文章于 2021-10-20 08:44:18 发布

weixin_30477797

最新推荐文章于 2021-10-20 08:44:18 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuqiuxue/p/8413020.html

版权

基本介绍

除了使用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>