AngularJS 過濾器

  uppercase 過濾器將字串格式化為大寫：

    <div ng-app = "myApp" ng-controller = "myCtrl">
        <p>姓名為:{{name | uppercase}}</p>
    </div>
    
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
        $scope.name = "John Doe";
    })
 

 lowercase 過濾器將字串格式化為小寫：

    <div ng-app = "myApp" ng-controller = "myCtrl">
        <p>姓名為:{{name | lowercase}}</p>
    </div>
    
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
        $scope.name = "John Doe";
    })
 

currency 過濾器將數字格式化為貨幣格式：

    <div ng-app = "myApp" ng-controller = "myCtrl">
        <input type="number" ng-model = "quantity">
        <input type="number" ng-model = "price">
        <p>總價 = {{quantity * price | currency}}</p>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
        $scope.quantity= 13;
        $scope.price= 2;
        })
    </script>
 

向指令新增過濾器

過濾器可以通過一個管道字元（|）和一個過濾器新增到指令中。

orderBy 過濾器根據表示式排列陣列：

    <div ng-app = "myApp" ng-controller = "myCtrl">
        <ul>
            <li ng-repeat = "x in names | orderBy:'country'">{{x.name + ' , ' + x.country }}</li>
        </ul>
    </div>
    <script>
        var app  = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.names = [
                    {name:"join",country:"China"},
                    {name:"stden",country:"USA"},
                    {name:"Tom",country:"Canada"}];
            })
    </script>

過濾輸入

輸入過濾器可以通過一個管道字元（|）和一個過濾器新增到指令中，該過濾器後跟一個冒號和一個模型名稱。

filter 過濾器從陣列中選擇一個子集：

        <div ng-app="myApp" ng-controller="myCtrl">
            <p><input type="text" ng-model="test"></p>
            <ul>
                <li ng-repeat="x in names | filter:test | orderBy:'country'">
                  {{ (x.name | uppercase) + ', ' + x.country }}
                </li>
            </ul>
        </div>
        <script>
            var app  = angular.module("myApp",[]);
                app.controller("myCtrl",function($scope){
                    $scope.names = [
                        {name:"join",country:"China"},
                        {name:"stden",country:"USA"},
                        {name:"Tom",country:"Canada"}];
                })
        </script>

自定義過濾器

以下例項自定義一個過濾器 reverse，將字串反轉：

        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.name = "hello"
        })
        app.filter('reverse',function(){
            return function(text){
                return text.split("").reverse().join("");
            }
        })

二、AngularJS 服務(Service)

在 AngularJS 中，服務是一個函式或物件，可在你的 AngularJS 應用中使用。

AngularJS 內建了30 多個服務。

 $location 服務

它可以返回當前頁面的 URL 地址。

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>當前頁面得url:</p>
        <h2>{{myUrl}}</h2>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope,$location){
            $scope.myUrl = $location.absUrl();
        })
    </script>

注意 $location 服務是作為一個引數傳遞到 controller 中。如果要使用它，需要在 controller 中定義。

$http 服務

$http 是 AngularJS 應用中最常用的服務。 服務向伺服器傳送請求，應用響應伺服器傳送過來的資料。

下面詳細說明，這裡不做多的解釋

$timeout 服務

AngularJS $timeout 服務對應了 JS window.setTimeout 函式。

    <div ng-app = 'myApp' ng-controller = 'myCtrl'>
        <p>兩秒後顯示新的資訊：</p>
        <h1>{{myMessage}}</h1>
        <p>$timeout 訪問在規定的毫秒數後執行指定函式。</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope,$timeout){
           $scope.myMessage = 'Hello World';
           $timeout(function (){
               $scope.myMessage = "my name is Lucy";
           },2000);
        })
    </script>

$interval 服務

AngularJS $interval 服務對應了 JS window.setInterval 函式。

    <div ng-app="myApp" ng-controller="myCtrl"> 

        <p>現在時間是:</p>
        <h1>{{thisTime}}</h1>
        <p>$interval 訪問在指定的週期(以毫秒計)來呼叫函式或計算表示式。</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope,$interval){
            $scope.thisTime = new Date().toLocaleTimeString();
            $interval(function(){
                $scope.thisTime  = new Date().toLocaleTimeString();
            },1000);
        })
    </script>

建立自定義服務

你可以建立自定義服務，連結到你的模組中：

    <div ng-app = "myApp" ng-controller = "myCtrl">
            <p>255 的16進位制是:</p>
            <h1>{{hex}}</h1>
            </div>
            <p>自定義服務，用於轉換16進位制數：</p>
    </div>
    <script>
            var app = angular.module('myApp', []);
            app.service("hexafy",function(){
                this.func = function(x){
                    return x.toString(16)
                }
            })
            app.controller("myCtrl",function($scope,hexafy){
                $scope.hex = hexafy.func(200)
            })
            </script>

在物件陣列中獲取值時可以使用過濾器：

    <div ng-app="myApp" ng-controller="myCtrl">
            <p>在獲取陣列 [255, 251, 200] 值時使用過濾器:</p>
            <!-- <input type="text" ng-model = "" -->
            <ul>
              <li ng-repeat="x in counts">{{x | myFormat}}</li>
            </ul>
            <p>過濾器使用服務將10進位制轉換為16進位制。</p>
    </div>
    <script>
         var app = angular.module('myApp', []);
         app.service("hexafy",function(){
            this.func = function(x){
                 return x.toString(16)
                }
            })
          app.filter('myFormat',['hexafy',function(hexafy){
                return function(x){
                    return hexafy.func(x);
            }
          }]
          )
          app.controller('myCtrl',function($scope){
              $scope.counts = [255,125,200,1000];
          })

    </script>