AngularJs 学习第二篇 之过滤器

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>