2013年12月6日 星期五

Angular Js Part III : Filter

原本第三篇是要寫Directive自訂控制項或者是Scope的,
但是那些都必須要再整理過,
因此先寫一篇無關痛癢的Filter吧~

Angular Js提供多種Filter可使用。

  • Currency:用來將數字轉換成貨幣
  • Date:轉換成特定日期格式
  • Filter:篩選機制,有點像是AutoComplete
  • Json:將物件轉換成Json字串。
  • limitTo:限制輸出的長度
  • lowercase、uppercase:轉換為大小寫
  • number:轉換為數字格式,並決定小數點後位數。
  • orderBy:排序,超強。

2013年12月3日 星期二

Angular Js Part II : Controller

繼上一篇Start Angularjs之後,
接著要介紹Angular js的另一個特性Controller。
Controller本身能做的事情大概有二:
1.對scope設置初始值(scope泛指應用程式所使用到的物件模型)
2.在scope上增加額外的處置,簡單來說就是寫程式的區塊。
範例一:
給定初始值,input中會有來自controller的文字。
原始碼:
<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">
    //Controller
    function urCtrl($scope){
      $scope.urName="it was inited from controller";
    }
    </script>
  </head>
  <body>
    <!-- Smapel ng-controller -->
    <div class="box" ng-controller="urCtrl">
      Sample ng-controller----------------<br>
      Type in ur Name<input name="input" ng-model="urName"><br>
      Hi~ {{urName}}!!!!
    </div>
  </body>
</html>