咖啡____With藍。-小伙

藍小伙

2014-07-10

[AnjularJS]Filters, Directives基本使用

  • 1534
  • 0
  • 2014-08-19

摘要:[AnjularJS]Filters, Directives基本使用

[AnjularJS]Filters, Directives基本使用



Directives

  • ng-app : 使Application Module附屬在這Page上

    <html ng-app="store">

  • ng-controller : 使Controller附屬在這Page上

    <body ng-controller="StoreController as store">

  • ng-show / ng-hide :是否顯示UI的某的部分，可使用這樣的表達。

    <h1 ng-show="name"> Hello, {{name}}! </h1>

  • ng-repeat : 用法就像 C#的Forech 一樣

    <li ng-repeat="product in store.products"> {{product.name}} </li>


Formatting With Filters

Angular的格式化語法，也帶有過濾的方法。

語句格式 {{ data | filter:options }}

  • date

    {{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
Result: 12/27/2013 @ 12:50AM

  • uppercase & lowercase(首字大寫或小寫)

    {{'octagon gem' | uppercase}}
Result: Octagon Gem

  • limitTo 使用在集合或字串，可以取前面幾個集合

    {{'My Description' | limitTo:8}}
Result: My Descr

  • orderBy 排序

    //升序
<li ng-repeat="product in store.products | orderBy:'-price'">


範例

  1. 有四顆珠寶(Dodecahedron、PentagonalGem、RedGem、BigGem)，將依名稱排序，顯示出名稱及價錢，及出產時間。

  2. 將利用以上語法來實現範例。


  • html code

    - 

    <!DOCTYPE html>
<html ng-app="store" >
<head lang="en">
    <script type="text/javascript" src="angular.min.js"></script>

    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body  ng-controller="StoreController as store">
    <ul class="list-group">

         <li class="list-group-item"
             ng-repeat="product in store.products | orderBy:'name' | limitTo:3 "
                 >             

            <h3>
                {{product.name | uppercase}}
                <em class="pull-right" >

                    //格式化 $ product.price
                    {{product.price | currency }}

                </em>


            </h3>
             <p>{{product.date | date:'MM/dd/yyyy'}}</p>
        </li>

    </ul>
</body>
</html>


  • js code

    - 

    //建構
AppConstructor()

//將你的JavaScipt 放在一個閉包裡是一個好的習慣
function AppConstructor()
{
    app = angular.module('store', [ ]);

    app.controller('StoreController', function()
    {
        this.products=gems;
    });
    var gems=[
    {
        name:'Dodecahedron',
        price:5.95,
        description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',
        date:1388123412323,
        //是否開放購買
        canPurchase: true,
        //是否銷售完畢
        soldOut:false
    },
        {
            name:'pentagonalGem',
            price:5,
            description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',
            date:1288123412323,
            //是否開放購買
            canPurchase: true,
            //是否銷售完畢
            soldOut:false
        },
        {
            name:'redGem',
            price:3.85,
            description:'Red.',
            date:1299123412323,
            //是否開放購買
            canPurchase: true,
            //是否銷售完畢
            soldOut:false
        }
        ,
        {
            name:'bigGem',
            price:3.20,
            description:'big',
            date:132123412323,
            //是否開放購買
            canPurchase: true,
            //是否銷售完畢
            soldOut:false
        }
    ]
}


Result:




By-藍小伙

本頁段落