Angular.JS学习记录（三）

2019年9月15日 179次阅读 来源: Hockor

Angular过滤器

AngularJS 过滤器可用于转换数据

过滤器描述
currency格式化数字为货币格式。
filter从数组项中选择一个子集。
lowercase格式化字符串为小写。
orderBy根据某个表达式排列数组。
uppercase格式化字符串为大写。

uppercase 过滤器格式化字符串为大写

（ng-app写在HTML标签上的哦！）：

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 过滤器根据某个表达式排列数组

其实上面的例子中我已经用到了这个过滤器，并且是以国家的首字母排序的，接下来我们用姓名排序

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>

效果如下：

《Angular.JS学习记录（三）》

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>

效果如下：
《Angular.JS学习记录（三）》

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文件：

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"
    }
]

示例如下：

《Angular.JS学习记录（三）》
以上我们是按照City排序的，
其中的ng-bind=”x.Name”类似于我们之前的{{name}},ng-bind的好处是可以在加载完之前不然用户看到难看的{{name}}！
具体实例大家可以自行测试！

PS： 顺带提一句，Angular的排序除了正序还有倒序，倒序的使用很简单：x in arr | orderBy: ‘-City’这样就可以了，对的，你没有看错，加个-号就行啦！
原创文章：转载请注明！

    原文作者：Hockor
    原文地址: https://segmentfault.com/a/1190000002547697
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞