AngularJS快速入门5--过滤器

来源：互联网发布：网络应用安全包括编辑：程序博客网时间：2024/06/04 18:44

过滤器

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

内置过滤器

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 0