首页 > 代码库 > AngularJs学习笔记（二）----------关于过滤器

AngularJs学习笔记（二）----------关于过滤器

2024-08-17 13:51:30   222人阅读

<!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学习笔记（二）----------关于过滤器


联系
我们