AngularJS快速入门5--过滤器

最新推荐文章于 2018-03-27 17:18:17 发布

有梦才美

最新推荐文章于 2018-03-27 17:18:17 发布

阅读量423

点赞数

分类专栏： angularjs 文章标签： angular angularjs

本文链接：https://blog.csdn.net/qq_38531689/article/details/70946737

版权

angularjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

过滤器

    通过某个规则处理接收到的数据，然后返回处理后的结果，也就是格式化需要展示给用户的数据。

内置过滤器

1.货币格式过滤器 currency

<html ng-app="my">
    <div ng-controller="myc”>
        原始输出数据的方法：<span ng-bind="price"></span>
        对于要展示的货币数据(原始数据就是数字) 按照指定的货币格式进行输出:
        货币过滤器输出：<span ng-bind="price | currency"></span>
        <span ng-bind="price | currency:'￥'"></span>（注：:'￥'指在价格前加上人民币符号）
        <span ng-bind="price | currency:'￥':3"></span>（注：:3指保留两位小数）
    </div>
*(重点:  |  为过滤器中的 管道符，如果需要传递参数给过滤器，需在参数前面加冒号)*
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
        $scope.price = 499.1213;
    }])
</script>
</html>

2.日期时间过滤器 date

<html ng-app="my">
    <div ng-controller="myc”>
        原始输出：<span ng-bind="price"></span>
        日期格式化：<span ng-bind="date | date"></span>
        <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />
        <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />
        <span ng-bind="date | date:'hh:mm:ss'"></span><br />
    </div>
*(重点:日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数y/M/d/h/m/s/E 年/月/日/时/分/秒/星期)*
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
        $scope.date = new Date();
    }])
</script>
</html>

3.JSON过滤器 json

<html ng-app="my">
    <div ng-controller="myc”>
        <span ng-bind="users|json"></span>
    </div>
*(把数据中的对象，转换成JSON字符串的格式输出展示到页面上，常用于代码程序调试，使用较少)*
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
         $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"biyao", nickname:"碧瑶"},
            {userID:4, username:"luxueqi", nickname:"陆雪琪"},
            {userID:5, username:"linjingyu", nickname:"林惊羽"},
            {userID:6, username:"cengshushu", nickname:"曾书书"},
            {userID:7, username:"zhuque", nickname:"朱雀"},
            {userID:8, username:"qinglong", nickname:"青龙"},
            {userID:9, username:"guiwang", nickname:"鬼王"},
            {userID:10, username:"dushen", nickname:"赌神"},
            {userID:11, username:"jinpiner", nickname:"金瓶儿"}
        ]
    }])
</script>
</html>

4.filter过滤输出，可以从给定数组中选择一个子集，并将其生成一个新数组返回。

<html ng-app="my">
    <div ng-controller="myc”>
        请输入搜索关键词：<input type="text" ng-model="keyword"><br />
        <ul>
            <li ng-repeat="u in users | filter:keyword">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
         $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            ······数组同上
        ]；
    }])
</script>
</html>

5.排序输出

<html ng-app="my">
    <div ng-controller="myc”>
        排序关键词：<input type="text" ng-model="keyword"/>
        排序顺序：<input type="checkbox" ng-model="sort"/><br />
        <ul>
            <li ng-repeat="u in users | orderBy:keyword:sort">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
         $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            ······数组同上
        ]；
    }])
</script>
</html>

6.字符串大小写转换过滤器

<html ng-app="my">
    <div ng-controller="myc”>
        <div ng-bind="name"></div>
        <div ng-bind="name | uppercase"></div>（转换为字母全部大写）
        <div ng-bind="name | lowercase"></div>（字母全部小写）
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
        $scope.name="John Smith";
    }])
</script>
</html>

7.长度限制过滤器

<html ng-app="my">
    <div ng-controller="myc”>
        长度：<input type="text" ng-model="length"/><br />
        位置：<input type="text" ng-model="index"/><br />（表示从哪里开始计算长度）
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
<script>
    var app=angular.module("my",[]);
    app.controller("myc", ["$scope", function($scope) {
       $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            ······数组同上
        ]；
    }])
</script>
</html>

8.number格式化

{{1.234567 | number:1}}    结果：1.2
{{1234567 | number}}    结果：1，234，567

*自定义过滤器（重要）

<script>
    var app=angular.module("myapp",[ ]);
    app.filter("myfilter",function(){       
        *（讲解：定义一个自定义过滤器，myfilter为过滤器名称，fn为过滤器处理函数）*
        return function（value）{
        *（过滤器中，直接return function（value）{}，通过闭包函数来实现数据处理，为固定语法结构。value参数，为第一个参数，用于接收要处理的数据，这个数据是过滤器接收到的数据，也就是准备过滤的数据。
        这一部分主要是用来进行数据处理的。）*
        return value；
        *（过滤器中数据处理完成，一定要返回输出。）*
        }
    })
</script>

有梦才美

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS快速入门5--过滤器

过滤器通过某个规则处理接收到的数据，然后返回处理后的结果，也就是格式化需要展示给用户的数据。内置过滤器1.货币格式过滤器<html ng-app="my"> <div ng-controller="myc”> 原始输出数据的方法：<span ng-bind="price"></span> 对于要展示的货币数据(原始数据就是数字) 按照指定的货币格式
复制链接

扫一扫