AngularJs過濾器

時間 2019-11-10

標籤 angularjs 過濾器欄目 AngularJS 简体版

原文原文鏈接

AngularJS過濾器數組

AngularJS過濾器可用於轉換數據：app

過濾器 描述spa

lowercase 格式化字符串爲小寫code

uppercase 格式化字符串爲大寫cdn

currency 格式化數字爲貨幣格式blog

orderBy 根據某個表達式排列數組ip

filter 從數組項中選擇一個子集字符串

date 日期格式化(date:"yyyy-MM-dd HH:mm:ss")input

number 保留小數it

limitTo 截取

過濾管道 |

表達式中添加過濾器

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

    <div ng-app="myApp" ng-controller="namesCtrl">
        <p>{{sex | uppercase}}</p>
        <ul>
            <li ng-repeat="x in names">
                {{x.name + "," +x.country}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

angular.module("myApp",[]).controller("namesCtrl",function($scope){
    $scope.names = [
        {name:"Jani",country:"Norway"},
        {name:"Hege",country:"Sweden"},
        {name:"Kai",country:"Denmark"}
    ];
    $scope.sex = "boy";
})

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

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

<div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>總價 = {{(quantity*price) | currency}}</p>
        <!--$138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names">
                {{x.name + "," +x.country}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

向指令添加過濾器

過濾器能夠經過一個管道字符|和一個過濾器添加到指令中，該過濾器後能夠跟一個冒號和一個模型名稱

orderBy(根據id升序排列)

    <div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>總價 = {{(quantity*price) | currency}}</p>
        <!--$138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names | orderBy:'id'">
                {{(x.name | uppercase) + "," +x.country + "," + x.id}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

angular.module("myApp",[]).controller("namesCtrl",function($scope){
    $scope.names = [
        {name:"Jani",country:"Norway",id:"3"},
        {name:"Hege",country:"Sweden",id:"1"},
        {name:"Kai",country:"Denmark",id:"2"}
    ];
    $scope.sex = "boy";
    $scope.price = "23.0";
    $scope.quantity = "6";
})

orderBy(根據id倒序排列)

<div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>總價 = {{(quantity*price) | currency}}</p>
        <p>總價 = {{(quantity*price) | currency:"RMB ￥"}}</p>
        <!--$138.00-->
        <!--RMB ￥138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names | orderBy:'id':true">
                {{(x.name | uppercase) + "," +x.country + "," + x.id}}
            </li>
        </ul>
        <!--自定義過濾器-->
        <p>{{msg | reverse}}</p>
        <!--頻調樂音我酷-->
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

自定義過濾器

如下實例自定義一個過濾器reverse,將字符串反轉：

<div ng-app="myApp" ng-controller="namesCtrl">
        <input type="text" ng-model="price">
        <input type="text" ng-model="quantity">
        <p>總價 = {{(quantity*price) | currency}}</p>
        <p>總價 = {{(quantity*price) | currency:"RMB ￥"}}</p>
        <!--$138.00-->
        <!--RMB ￥138.00-->
        <p>{{sex | uppercase}}</p>
        <!--BOY-->
        <ul>
            <li ng-repeat="x in names | orderBy:'id'">
                {{(x.name | uppercase) + "," +x.country + "," + x.id}}
            </li>
        </ul>
        <!--自定義過濾器-->
        <p>{{msg | reverse}}</p>
        <!--頻調樂音我酷-->
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

var app = angular.module("myApp",[]);
app.controller("namesCtrl",function($scope){
    $scope.names = [
        {name:"Jani",country:"Norway",id:"3"},
        {name:"Hege",country:"Sweden",id:"1"},
        {name:"Kai",country:"Denmark",id:"2"}
    ];
    $scope.sex = "boy";
    $scope.price = "23.0";
    $scope.quantity = "6";
    $scope.msg = "酷我音樂調頻";
})
// 自定義過濾器reverse
app.filter("reverse",function(){//能夠注入依賴
    return function (text){
        return text.split("").reverse().join("");
    }
})

date格式化

    <div ng-app="myApp" ng-controller="namesCtrl">
       {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
    </div>
    
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

number格式化(保留小數)

    <div ng-app="myApp" ng-controller="namesCtrl">
       {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
       {{149016.1945000 | number:2}}
       <!--2017-03-22 13:52:25-->
       <!--149,016.19-->
    </div>

filter查找

從數組項中選擇一個子集(查找id:3的行)

　　<div ng-app="myApp" ng-controller="namesCtrl">
        {{ names | filter:{'id':'3'} }}
        <!--[{"name":"Jani","country":"Norway","id":"3"}]-->
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="namesController.js"></script>

　　var app = angular.module("myApp",[]);
　　app.controller("namesCtrl",function($scope){
    　　$scope.names = [
        　　{name:"Jani",country:"Norway",id:"3"},
        　　{name:"Hege",country:"Sweden",id:"1"},
        　　{name:"Kai",country:"Denmark",id:"2"}
    　　];
   　　 $scope.sex = "boy";
    　　$scope.price = "23.0";
    　　$scope.quantity = "6";
    　　$scope.msg = "酷我音樂調頻";
　　})

limitTo截取

    <div ng-app="myApp" ng-controller="namesCtrl">
        <!--從前面開始截取前6位-->
        {{"1234567890" | limitTo :6}}
        <!--從後面開始截取後6位-->
        {{"1234567890" | limitTo :-6}}
    </div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。