2-8. Angular-自定义过滤器

自定义过滤器

  • AngularJS内建过滤器, 还可以根据业务需要自定义过滤器
  • 通过模块对象实例提供的filter方法定义过滤器
  • 自定义过滤器
    • 参数一: 过滤器名称
    • 参数二: 回调函数
    • 返回为一个函数(input 为自动传入的数据, input为管道符前面的内容)
app.filter( 过滤器名称 , function () {
    return function (input, args) {
      return args + input;
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body ng-app="app" ng-controller="xmgController">

    <!--<p>{{price | skCur}}</p>-->
    <!--<p>{{price | skCur:'¥'}}</p>-->
    <p>{{price | skCur:'@@'}}</p>

    <!--首字母大写-->
    <!--<p>{{str | uppercase}}</p>-->
    <p>{{str | firstUppercase}}</p>

</body>

<script src="js/angular.js"></script>
<script>
    //1.创建模块
    var app = angular.module('app', []);
    //2.创建控制器
    app.controller('xmgController', ['$scope', function ($scope) {
        $scope.price = 55;
        $scope.str = 'gdmm';

    }]);

    //3.绑定模块 ng-app="app"
    //4.绑定控制器 ng-controller="xmgController"

    //自定义指令
    app.directive('div', function () {
    });

    //自定义过滤器
    //参数一: 过滤器名称
    //参数二: 回调函数
    //返回为一个函数(input 为自动传入的数据, input为管道符前面的内容)
    app.filter('skCur', function () {
        return function (input, args) {
            //console.log(input);
            //return 40;
            //return '$' + input;
            return args + input
        }
    });

    //首字母大写过滤器
    app.filter('firstUppercase', function () {
        return function (input, args) {//input 自动传入管道符前面的内容
            //console.log(input[0]);
            //console.log(input[0].toUpperCase());
            // slice()从指定位置,截取到末尾
            return input[0].toUpperCase() + input.slice(1);
        }
    });

</script>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建...
    oWSQo阅读 1,119评论 0 5
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,859评论 18 139
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 889评论 0 2
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,632评论 0 3
  • 她来自大别山的偏远农村 父亲扛着麻袋送她入学 北大研究生未毕业,就靠自己的智慧赚取人生第一桶金,给父母扛回16万 ...
    安童书阅读 510评论 0 0