zoukankan      html  css  js  c++  java
  • AngularJs学习笔记(二)----------关于过滤器

    <!DOCTYPE html5>
    <html>
        <head>
            <title>AngularJs的练习</title>
            <meta charset="UTF-8"/>
        </head>
        <body ng-app="myModule1">
            <h1>AngularJs中过滤器的使用---在HTML模板中使用</h1>
            <h3>number过滤器</h3>
            <div>
                <label for="myInput">这是输入框:</label><input ng-model="unum" id="myInput"/>
                <p>只有输入的是数字后面才会显示</p>
                <ul>
                    <li>默认3位小数:{{ unum | number}}</li>
                    <li>指定2位小数:{{ unum | number : 2}}</li>
                    <li>指定4位小数:{{ unum | number : 4}}</li>
                </ul>
            </div>
            <hr/>
            <h3>货币过滤器---currency</h3>
            <div>
                <label for="myInput">这是输入框:</label><input ng-model="money" id="myInput"/>
                <p>可以给输入的数字前面加货币符号</p>
                <ul>
                    <li>默认货币符号:{{ money | currency}}</li>
                    <li>RMB符号:{{ money | currency : '¥'}}</li>
                    <li>任意符号:{{ money | currency : '%$%^#'}}</li>
                </ul>
            </div>
            <hr/>
            <h3>日期过滤器--date</h3>
            <div>
                <label for="myInput">这是输入框:</label><input ng-model="myDate" id="myInput"/>
                <p>可以指定日期的显示格式---此处将离计算机元年的毫秒数转换为日期</p>
                <ul>
                    <li>默认日期格式:{{ myDate | date}}</li>
                    <li>年-月-日:{{ myDate | date : 'yyyy-MM-dd'}}</li>
                    <li>年-月-日 时:分:秒:{{ myDate | date : 'yyyy-MM-dd HH:mm:ss'}}</li>
                </ul>
            </div>
            <hr/>
            <h3>大写(uppercase)、小写(lowercase)过滤器</h3>
            <div>
                <label for="myInput">这是输入框:</label><input ng-model="myLetter" id="myInput"/>
                <p>字母大小写的转换</p>
                <ul>
                    <li>转为大写:{{ myLetter | uppercase }}</li>
                    <li>转为小写:{{ myLetter | lowercase }}</li>
                </ul>
            </div>
            <hr/>
            <h3>宽度限定过滤器--limitTo</h3>
            <div>
                <label for="myInput">这是输入框:</label><input ng-model="myWith" id="myInput"/>
                <p>会限制宽度</p>
                <ul>
                    <li>限制为10个字符:{{ myWith | limitTo : 10 }}</li>
                </ul>
            </div>
            <hr/>
            <h3>json过滤器--将js对象转换为json字符串</h3>
            <div>
                <p>下面是我的js对象:</p>
                <pre>
                    var person={uname:'Tom',age:23,isTall:true};
                </pre>
                <p>这是json字符串:{{ {uname:'Tom',age:23,isTall:true} | json }}</p>
            </div>
            <p>还有两个过滤器(orderBy、filter)----待续。。。。。</p>
    
            <script src="js/angular.js"></script>
            <script src="js/4.js"></script>
        </body>
    </html>

    对应js:

    angular.module('myModule1',[]);
  • 相关阅读:
    OC基础--常用类的初步介绍与简单使用之NSDate
    mysql创建自定义函数与存储过程
    Hibernate Session 获取connection
    mysql中isnull,ifnull,nullif的用法
    mysql数据库中某项其中一个值在该项排第几,百分几
    linux下的ImageMagick安装方法
    Java 判断操作系统类型(适用于各种操作系统)
    tesseract 字体训练资料篇
    structDemo1
    C语言中.h和.c文件解析(很精彩)
  • 原文地址:https://www.cnblogs.com/mujinxinian/p/5990136.html
Copyright © 2011-2022 走看看