AngularJS-03 過濾器

時間 2019-11-21

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

原文原文鏈接

過濾器javascript

能夠對輸入的值按照指定的方案進行處理後再輸出的函數。css

1.貨比過濾器currency：{{ currency_expression | currency : symbol}}html

2.日期過濾器：date格式化date到字符串，基於format的要求。java

{{ date_expression | date : format}}express

3.數字過濾器：number，格式化數字數組

4.大小寫：lowercase，uppercaseapp

5.limitTo函數

代碼：ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="KunShan Online retailers ">
    <title></title>
    <link rel="stylesheet" href="css/angular-csp.css" />

</head>
<body ng-app="app">


    <div ng-controller="ctrl">

        currency:<input ng-model="t2" /> <br/>
        <h3>{{ t2|currency:'RMB ' }}</h3>
        
        <h2>{{birthday|date}}</h2>
        
        number:<input ng-model="t1" /><br />
        <p1>{{t1|number:2}}</p1>

        <h2>{{ temp1 | uppercase}}</h2>

        LowerCase:<input ng-model="temp2" /><br/>
        <h2>{{temp2 | lowercase}}</h2>

        limitTo:<input ng-model="temp3" /> <br/>
        <h2>{{temp3 | limitTo:3}}</h2>
        
    </div>
    
    <script type="text/javascript" src="js/angular.js" ></script>
    <script type="text/javascript" src="js/0122.js"></script>
</body>
</html>

var app = angular.module('app',[]);//建立的模塊賦值給app對象

app.controller('ctrl',function ($scope) {

    $scope.birthday = new Date();

    $scope.data = [1,2,3,4,5,6];

    $scope.temp1="zhangqing";


})

6.filter：從array中選擇一個子集，做爲一個新數組返回spa

ng-repeat（重要）:用來將數據集合按照指定的形式重複渲染出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="KunShan Online retailers ">
    <title></title>
    <link rel="stylesheet" href="css/angular-csp.css" />

</head>
<body ng-app="app">

    <div ng-controller="ctrl">

        任意字段<input type="text" ng-model="searchText.$" />
        搜索名字<input type="text" ng-model="searchText.name" />
        搜索電話<input type="text" ng-model="searchText.tel" />
        <!--ng-repeat::用來將數據集合按照指定的形式重複渲染出來-->
        <table>
            <tr><td>name</td><td>tel</td></tr>
            <tr ng-repeat="friend in friends | filter:searchText"><!--filter過濾器:object-->
                <td>{{friend.name}}</td>
                <td>{{friend.tel}}</td>
            </tr>
        </table>

    </div>

    <script type="text/javascript" src="js/angular.js" ></script>
    <script type="text/javascript" src="js/0122.js"></script>
</body>
</html>

var app = angular.module('app',[]);//建立的模塊賦值給app對象

app.controller('ctrl',function ($scope) {


    $scope.birthday = new Date();


    $scope.data = [1,2,3,4,5,6];


    $scope.temp1="zhangqing";


    $scope.friends=[
        {name:'q1',tel:'1111'},
        {name:'q2',tel:'2222'},
        {name:'q3',tel:'3333'},
        {name:'q4',tel:'4444'},
        {name:'q5',tel:'5555'}
    ]




})

7.orderBy：經過expression來排序指定的數組。字符串按字母的順序排序，數字按照大小排序。注意：若是你發現數字沒有正確排序，請確認他們保存的是數字而不是字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="KunShan Online retailers ">
    <title></title>
    <link rel="stylesheet" href="css/angular-csp.css" />
</head>
<body ng-app="app">

    <div ng-controller="ctrl">

        任意字段<input type="text" ng-model="searchText.$" />
        搜索名字<input type="text" ng-model="searchText.name" />
        搜索電話<input type="text" ng-model="searchText.tel" />
        <!--ng-repeat::用來將數據集合按照指定的形式重複渲染出來-->
        <table>
            <tr>
                <td><a href="javascript:void (0);" ng-click="orderFriend='name';reverse=!reverse;">name</a></td>
                <td><a href="javascript:void (0);" ng-click="orderFriend='tel';reverse=!reverse;">tel</a></td>
            </tr>
            <tr ng-repeat="friend in friends | orderBy:orderFriend:reverse"><!--filter過濾器:object-->
                <td>{{friend.name}}</td>
                <td>{{friend.tel}}</td>
            </tr>
        </table>

    </div>
    
    <script type="text/javascript" src="js/angular.js" ></script>
    <script type="text/javascript" src="js/0122_orderby.js"></script>

</body>
</html>

var app = angular.module('app',[]);//建立的模塊賦值給app對象

app.controller('ctrl',function ($scope) {

    $scope.friends=[
        {name:'zq1',tel:'1111'},
        {name:'qq2',tel:'2222'},
        {name:'wq3',tel:'3333'},
        {name:'eq4',tel:'4444'},
        {name:'fq5',tel:'5555'}
    ]

    $scope.orderFriend='';
    $scope.reverse=true;

})

相關標籤/搜索

每日一句

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