码迷,mamicode.com
首页 > 其他好文 > 详细

Angular——自定义过滤器

时间:2018-02-04 14:42:50      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:head   传递   过滤   返回值   set   ack   $scope   []   .text   

基本介绍

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

 

Angular——自定义过滤器

标签:head   传递   过滤   返回值   set   ack   $scope   []   .text   

原文地址:https://www.cnblogs.com/wuqiuxue/p/8413020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!