-_-#【Angular】自定义过滤器

AngularJS学习笔记

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body ng-init="a=‘222‘">
   <script src="jquery-1.8.3.min.js"></script>
   <script src="angular.min.js"></script>
   <p>示例数据: {{ a|map }}</p>
   <script>
        var app = angular.module(‘Demo‘, [], angular.noop)
        app.filter(‘map‘, function() {
            var filter = function(input) {
                return input + ‘...‘
            }
            return filter
        });
   </script>
</body>
</html>

过滤器也可以带参数，多个参数之间使用:分割

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
   <script src="jquery-1.8.3.min.js"></script>
   <script src="angular.min.js"></script>
   <div ng-controller="TestCtrl">
       <p>示例数据: {{ a|map:map_value:‘&gt;&gt;‘:‘(no)‘ }}</p>
       <p>示例数据: {{ b|map:map_value:‘&gt;&gt;‘:‘(no)‘ }}</p>
   </div>
   <script>
        var app = angular.module(‘Demo‘, [], angular.noop)
        app.controller(‘TestCtrl‘, function($scope) {
            $scope.map_value = {
                a: ‘一‘,
                b: ‘二‘,
                c: ‘三‘
            }
            $scope.a = ‘a‘
        })

        app.filter(‘map‘, function() {
            var filter = function(input, map_value, append, default_value) {
                console.log(input, map_value, append, default_value)
                var r = map_value[input]
                if (r === undefined) {
                    return default_value + append
                } else {
                    return r + append
                }
            }
            return filter
        })
   </script>
</body>
</html>

时间： 2024-10-03 23:10:06

-_-#【Angular】自定义过滤器的相关文章

Angular——自定义过滤器

基本介绍除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器. 基本使用 (1)input是将绑定的数据以参数的形式传入 (2)input后面的参数也就是:后面的参数,指导在视图时候该如何传递参数 (3)filter方法的回调函数将函数作为返回值,最后这个函数会在视图中进行调用,并且返回值 App.filter('demo', function () { return function (input, arg) { retur

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

lucene自定义过滤器

先介绍下查询与过滤的区别和联系,其实查询(各种Query)和过滤(各种Filter)之间非常相似,可以这样说只要用Query能完成的事,用过滤也都可以完成,它们之间可以相互转换,最大的区别就是使用过滤返回的结果集不带评分操作,而使用Query返回的结果都是带相关性评分的,所以当我们如果有一些跟评分操作没有关系的业务,优先使用Filter操作,将会获取更好的性能,其实这也是Solr里面的q参数跟fq参数的区别. 下面,开始进入正题,在这之前,散仙还是喜欢老生常谈的先来了解一下Lucene里面有关

自定义过滤器

自定义过滤器有两种方法 $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个参数. 这是