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

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

时间: 2024-07-30 06:28:15

Angular——自定义过滤器的相关文章

Angular 自定义过滤器

<!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-co

angular自定义过滤器

<html ng-app="Demo"> <head> <meta charset="utf-8"> <title>Order</title> </head> <body> <script src="js/angular.min.js"></script> <script> var app = angular.module('D

自定义过滤器

自定义过滤器有两种方法 $filterProvider.register('filterName',function(){ return function(obj){ var newObj =[]; angular.forEach(obj,function(o){ if(o.age>20) newObj.push(o); }) return newObj } }) 第二种 angular.module('myapp',[]).filter('filterName',function(){ ret

angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子

1.   数据的双向绑定可以简单的理解为,无论在文本框中输入什么,都会在数据模型中显示出来输入的内容, 双向绑定的模型和数据是进行动态绑定的,实时检查进行修改. <input type="text" ng-model="name"> {{name}} 在上述代码中,通过angular.js将数据模型对象($scope)的name属性与文本模型绑定在一起,然后就实现了在输入框输入什么都会 在文本模型中显示对应的内容,实时更新. 控制器controller,

angular JS 过滤器

过滤器: 过滤器用来格式化需要展示给用户的数据. AngularJS有很多实用的内置过滤器,也可以自己创建过滤器. 可以使用过滤器:  前面是数据, 后面是格式 {{ name | uppercase }} 可以通过$filter来调用过滤器, app.controller('DemoController', ['$scope', '$filter',function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); //

AngularJS中自定义过滤器

AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { return function (number) { if (isNaN(number) || number < 1) { return number; } else { var lastDigit = number % 10; if (lastDigit === 1) { return numbe

angularJs的过滤器扩展及自定义过滤器

一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js&

创建 AngularJS 自定义过滤器,带自定义参数

Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): <tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'"> 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是

Django中自定义过滤器的使用

我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文件,配置urls映射,编写views试图,编写模板templates,编写models模块 切记 注册应用.  很多伙伴找不到自己定义的过滤器,是因为忘记注册应用! 2 创建过滤器的目录: 实际上,在项目目录或者应用目录下创建都是可以的,创建一个名为templatetags的python模块 在我这