AngularJs學習筆記（二）----------關於過濾器

時間  2019-12-07
標籤 angularjs 學習 筆記 關於 過濾器 欄目 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:html

angular.module('myModule1',[]);
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程