首页 > Web开发 > 详细

AngularJs学习笔记(二)----------关于过滤器

时间:2016-10-23 17:34:44      阅读:143      评论:0      收藏:0      [点我收藏+]
<!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‘,[]);

 

AngularJs学习笔记(二)----------关于过滤器

原文:http://www.cnblogs.com/mujinxinian/p/5990136.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!