AngularJS 教學 - Templates

Templates 在 AngularJS 中的視圖(View)是相當重要的一環，它跟多數套件的 Templates 有著相同的功能。

而 AngularJS 的 Templates 則是包括了 AngularJS 特殊的屬性(ex: ng-model)或元素(Directives)

所以 AngularJS 會融合 Templates 與 Model 和 Controller 的資訊來做到 View 的渲染以及 Two-Way Binding

本篇介紹一些常用或是好用的 AngularJS Templates：

• ng-repeat

          ng-repeat 幾乎是一定會用到的一個 AngularJS 標籤屬性，他目的是用來在畫面上將

         多筆資料的 Model 用迴圈的方式一個一個的建立到視圖上，如下範例所示：

         

         <script>

              var demoApp = angular.module("demoApp", []);

              demoApp.controller("demoCtrl", function($scope){

                  $scope.users = [

                     {uid:'1', name: 'Allen', phone: '12493215'},

                     {uid:'2', name: 'Alex', phone: '70314568'},

                     {uid:'3', name: 'Alice', phone: '345106847'}

                  ];

             });

     </script>

     <div ng-controller="demoCtrl">

              <ul>

                  <li ng-repeat="user in users">

                       Name: {{user.name}} <br/>

                       Phone: {{user.phone}} <br/>

                  </li>

              </ul>

     </div>

        

         這個結果最後是 AngularJS 在網頁上呈現三個 li 元素，每筆資料各有每個 User 的資料

         這是一個典型的 Template 與 Controller 和 Model 之間的關係，在 AngularJS 教學 - Controller and View　有提到

         而 AngularJS 的官網也有一張蠻清晰的圖來描述他們之間的關係，不妨參考看看

• 一些 ng-repeat 的變數： $index、$first、$last、$even、$odd

         $index 是用來描述 ng-repeat 目前的索引值，跟陣列一樣都從 0 開始

         $first   是用來描述 ng-repeat 目前的 item 是否是第一個

         $last   是用來描述 ng-repeat 目前的 item 是否是最後一個

         $even 是用來描述 ng-repeat 目前的 item 是否是位在偶數個

         $odd  是用來描述 ng-repeat 目前的 item 是否是位在奇數個

          <li ng-repeat="user in users">

         index: {{$index}} <br/>

         Is First: {{$first}} <br/>

         Is Last: {{$last}} <br/>

         Is Even: {{$even}} <br/>

         Is Odd: {{$odd}} <br/>

         Name: {{user.name}} <br/>

         Phone: {{user.phone}} <br/>

     </li>

          

• ng-include

          ng-inclide 是用來將其他的 HTML page 加載到目前的 HTML 內，

          例如我定義了一個額外的 HTML page (include.html)內容如下

          <p>I'am a included page</p>

      A quantity of users: {{users.length}}          

          並且在原本的頁面加入  <ng-include src="'include.html'"></ng-include>

      指定 src 屬性到要 include 的 page 路徑，注意要用單引號括住整個路徑字串

           如果想要在 page 被 include 近來時做一些事情，可以加上 onload 屬性來執行

• ng-switch

          類似眾多語言理面的 switch 功能，如下為 AngularJS 的 ng-switch 功能

          <script>

              var demoApp = angular.module("demoApp", []);

              demoApp.controller("demoCtrl", function($scope){

                  $scope.users = [

                     {id:1, name: 'Allen', phone: '12493215'},

                     {id:2, name: 'Alex', phone: '70314568'},

                     {id:3, name: 'Alice', phone: '345106847'}

                  ];

                  $scope.selection = "Allen";

             });

      </script>

      <div ng-controller="demoCtrl">

            <select ng-model="selection" ng-options="user.id as user.name for user in users"></select>

             ${{selection}}

            <div ng-switch on="selection">

                <div ng-switch-when="1">Allen</div>

                <div ng-switch-when="2">Alex</div>

                <div ng-switch-when="3">Alice</div>

                <div ng-switch-default>default</div>

            </div>

       </div>

         我們需要注意的是 ng-switch 要給一個 on 屬性來指名當哪一個 Model 值變化的時候，

　

         就要執行 Switch 迴圈一次，因此上述程式是指定了 selection 的值，

         而 selection 的值會隨著上方的 select 標籤的選擇做變化，因此下方的 Switch 迴圈也會作出適當的反應

下一篇來介紹一下 AngularJS 提供的其他 View 方面的屬性！