AngularJS学习笔记

{{ name | uppercase}}

{{ 123.456789 | number:2 }}

app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) {

    $scope.name = $filter('lowercase')('Ari')

}])

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

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

【Angular】过滤器的更多相关文章

  1. Angular过滤器

    angular中的过滤器有: currency 过滤货币 number  过滤数字, date  过滤日期 json 把js对象过滤为json字符串 limitTo  截取字符串,参数是正数则从左往右 ...

  2. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  3. angular过滤器基本用法

    1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...

  4. Angular 过滤器的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. angular过滤器使用 自定义过滤器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  6. 如何angular过滤器进行排序？？？

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  7. angular 过滤器（日期转换，时间转换，数据转换等）

    (function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...

  8. Angular 过滤器

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  9. 简话Angular 04 Angular过滤器详解

    一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...

  10. angular过滤器在html和js中的使用

    在HTML中使用格式为:{{数据 | 过滤器名称:条件一:条件二--}}:过滤条件间使用:隔开 例如: 在代码中一般格式为:  变量 = $filter("过滤器名称")(被过滤数 ...

随机推荐

  1. HFS模板开发

    痉挛模板, 节, 符号 & 变量帮助需要更多帮助 吗?看看 下面这些链接-模板是模型痉挛用于构建 HTML 页面. -它分为几个部分, 每个部分描述最终 HTML 页面的一部分. -此模板必须 ...

  2. vue组件---自定义事件

    首先简单回顾下组件事件及组件的复用 demo1:按钮事件 <div class="button_area"> <button-area></butto ...

  3. ThinkPHP---thinkphp拓展之空操作

    [一]概论 (1)定义 空操作指系统在找不到指定操作方法的时候.会定位到空操作方法 / 控制器来执行,利用这个机制,我们可以实现错误页面的自定义和URL的优化 (2)场景 常用于错误页面的自定义 (3 ...

  4. 如何快速的vue init 属于自己的vue模板？

    相信很多接触过vue的小伙伴非常熟悉了,我们在开启项目之前都需要vue init webpack xx来初始化自己的项目目录.但是在实际开发中我们往往会根据公司要求或者业务的需要会对目录进行局部的调整 ...

  5. (C/C++学习)16.函数指针

    说明:函数指针,顾名思义就是指向函数的指针.C/C++中函数名的本质其实就是一段代码段空间的首地址. 1.定义 如下的 pf 就是一个函数指针,指向所有返回类型为 int,并带有两个 const in ...

  6. Python学习-while循环语句

    Python 编程中 while 语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务.即重复性的做一件事情 语法形式如下: while 判断条件: 条件满足执行语句…… ...

  7. 常用的HTTP测试工具谷歌浏览器插件汇总

    网页的开发和测试时最常见的测试就是HTTP测试,作为曾经的测试人员在这方面还是略知一二的.其实做网页测试工作是非常繁琐的时期,有时候甚至是无聊重复的,如果没有网页测试工具的帮助的话,测试人员会越做越怀 ...

  8. LES on Wind turbine

  9. DemoKit编译过程

    E:\Project_code\EAE\src_rev_24139_A95LYD\Project\DemoKit>make release Checking uITRON - DemoKit r ...

  10. gif & tools

    gif & tools https://www.cockos.com/licecap/ https://www.cockos.com/licecap/licecap128-install.ex ...