Angular.JS學習記錄（三）

時間 2019-11-08

標籤 angular.js angular 學習記錄欄目 AngularJS 简体版

原文原文鏈接

Angular過濾器

AngularJS 過濾器可用於轉換數據html

過濾器	描述
currency	格式化數字爲貨幣格式。
filter	從數組項中選擇一個子集。
lowercase	格式化字符串爲小寫。
orderBy	根據某個表達式排列數組。
uppercase	格式化字符串爲大寫。

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

（ng-app寫在HTML標籤上的哦！）：jquery

html<body>
<div ng-controller="hockor">
    <p>循環對象:</p>
    <ul>
        <li ng-repeat="x in names | orderBy:'country' ">
            {{ x.name + ', ' + x.country | uppercase}}
        </li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope) {
        $scope.names = [
            {name:'Andy',country:'Norway'},
            {name:'Bruce',country:'Sweden'},
            {name:'kevin',country:'Denmark'}
        ];
    }
</script>
</body>

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

html<body>
<div ng-controller="hockor">
    <p>循環對象:</p>
    <ul>
        <li ng-repeat="x in names | orderBy:'country' ">
            {{ x.name + ', ' + x.country | lowercase}}
        </li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope) {
        $scope.names = [
            {name:'ANDY',country:'Norway'},
            {name:'BRUCE',country:'Sweden'},
            {name:'kEVIN',country:'Denmark'}
        ];
    }
</script>
</body>

orderBy 過濾器根據某個表達式排列數組

其實上面的例子中我已經用到了這個過濾器，而且是以國家的首字母排序的，接下來咱們用姓名排序json

html<body>
<div ng-controller="hockor">
    <p>循環對象:</p>
    <ul>
        <li ng-repeat="x in names | orderBy:'name' ">
            {{ x.name + ', ' + x.country}}
        </li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope) {
        $scope.names = [
            {name:'ANDY',country:'Norway'},
            {name:'BRUCE',country:'Sweden'},
            {name:'kEVIN',country:'Denmark'}
        ];
    }
</script>
</body>

效果以下：數組

filter 過濾器從數組中選擇一個子集

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

html<body>
<div ng-controller="hockor">
    <p>循環對象:</p>
    <p><input type="text" ng-model="name"></p>
    <ul>
        <li ng-repeat="x in names | filter:name | orderBy:'country'">
            {{ x.name + ', ' + x.country}}
        </li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope) {
        $scope.names = [
            {name:'ANDY',country:'Norway'},
            {name:'BRUCE',country:'Sweden'},
            {name:'kEVIN',country:'Denmark'},
            {name:'Cindy',country:'china'},
            {name:'hockor',country:'china'}
        ];
    }
</script>
</body>

效果以下：
app

Angular$Http

$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據,當從服務端載入 JSON 數據時，返回的會是一個數組。
HTML文件測試

html<body>
<table ng-controller="hockor">
    <tr ng-repeat = "x in arr | orderBy: 'City'">
        <td ng-bind="x.Name"></td>
        <td ng-bind="x.Country"></td>
        <td ng-bind="x.City"></td>
    </tr>
</table>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope,$http) {
        $http.get("./json.json").success(function(res) {
            $scope.arr = res;
            //ng-repeat  迭代輸出，與JS數組完美結合，能夠使用oderBy排序輸出
        });
    }
</script>
</body>

JSON文件：spa

json[
    {
        "Name": "Alfreds Futterkiste",
        "City": "Berlin",
        "Country": "Germany"
    },
    {
        "Name": "Berglunds snabbköp",
        "City": "Luleå",
        "Country": "Sweden"
    },
    {
        "Name": "Centro comercial Moctezuma",
        "City": "México D.F.",
        "Country": "Mexico"
    },
    {
        "Name": "Ernst Handel",
        "City": "Graz",
        "Country": "Austria"
    },
    {
        "Name": "FISSA Fabrica Inter. Salchichas S.A.",
        "City": "Madrid",
        "Country": "Spain"
    },
    {
        "Name": "Galería del gastrónomo",
        "City": "Barcelona",
        "Country": "Spain"
    },
    {
        "Name": "Island Trading",
        "City": "Cowes",
        "Country": "UK"
    },
    {
        "Name": "Königlich Essen",
        "City": "Brandenburg",
        "Country": "Germany"
    },
    {
        "Name": "Laughing Bacchus Wine Cellars",
        "City": "Vancouver",
        "Country": "Canada"
    },
    {
        "Name": "Magazzini Alimentari Riuniti",
        "City": "Bergamo",
        "Country": "Italy"
    },
    {
        "Name": "North/South",
        "City": "London",
        "Country": "UK"
    },
    {
        "Name": "Paris spécialités",
        "City": "Paris",
        "Country": "France"
    },
    {
        "Name": "Rattlesnake Canyon Grocery",
        "City": "Albuquerque",
        "Country": "USA"
    },
    {
        "Name": "Simons bistro",
        "City": "København",
        "Country": "Denmark"
    },
    {
        "Name": "The Big Cheese",
        "City": "Portland",
        "Country": "USA"
    },
    {
        "Name": "Vaffeljernet",
        "City": "Århus",
        "Country": "Denmark"
    },
    {
        "Name": "Wolski Zajazd",
        "City": "Warszawa",
        "Country": "Poland"
    }
]

示例以下：3d

以上咱們是按照City排序的，
其中的ng-bind="x.Name"相似於咱們以前的{{name}},ng-bind的好處是能夠在加載完以前否則用戶看到難看的{{name}}！
具體實例你們能夠自行測試！code