AngularJS-study-过滤器

currency

格式化数字为货币形式 (如 $1,234.56)。

<!-- currency默认是美元 -->
<h2>{{ ctrl.money | currency }}</h2>
<h2>{{ ctrl.money | currency : '￥' }}</h2>

uppercase

转换字符串为大写形式。

<h2> {{ "abcd" | uppercase }} </h2>

lowercase

转换字符串为小写形式。

<h2> {{ "ABCD"   | lowercase }} </h2>

limitTo

限制字符串或数组的长度

<!-- 管道符可以连着用，继续过滤 -->
<h2> {{ ctrl.str | limitTo : 3 | uppercase }} </h2>
<!-- 过滤数组后，获取2个长度，然后获取第一个 -->
<h2> {{ (ctrl.arr | limitTo : 2)[1] }} </h2>

number

格式化数字到文本。

<h2> {{ 1234567 | number }} </h2>
<!-- 保留两位小数 -->
<h2> {{ 1234567 | number : 2 }} </h2>
<!-- 支持四舍五入 -->
<h2> {{ 1234567.855 | number : 2 }} </h2>

date

格式化date到字符串，基于format的要求。

<h2> {{ ctrl.time | date : 'yy-MM-dd hh:mm:ss.sss' }} </h2>

Paste_Image.png

orderBy

可以对数字、字符串进行排序

默认排序为升序

<h2> {{ ctrl.arr | orderBy }} </h2>

排降序

<h2> {{ ctrl.arr | orderBy : order : true }} </h2>

配合ng-repeat使用

<li ng-repeat = "item in ctrl.arr | orderBy"> {{ item }} </li>

数组中有对象的排序（按照对象的某个属性去排序）

<h2> {{ ctrl.persons | orderBy : "age" }} </h2>

数据结构如下

Paste_Image.png

实现过滤排序小功能

<h1>过滤排序小功能</h1>
<div>条件过滤：</div>
<input type="text" ng-model="ctrl.queryFilter">

<div>条件排序</div>
<select name="" id="" ng-model="ctrl.queryType">
    <option value="name">按照名字排序</option>
    <option value="age">按照年龄排序</option>
</select>

<div>数据展示</div>
<ol>
    <!-- filter : ctrl.queryFilter按照input输入框输入的值去过滤 -->
    <!-- ctrl.queryType按照下拉选框的条件进行排序 -->
    <li ng-repeat="person in ctrl.persons | filter : ctrl.queryFilter
        | orderBy : ctrl.queryType">
        {{ person.name }}==={{ person.age }}
    </li>
</ol>

效果如下

GIF.gif

自定义过滤器

功能：根据某个字符串，过滤掉这个字符串中的数字

视图

<h2> {{ ctrl.str | filterNum }} </h2>

控制器

angular.module("myApp",[])
    .controller("MyCtrl",[function () {
        var self = this;
        self.str = "hello 123 world 456"
    }])
    // 在这里自定义过滤器
    // 这个过滤器的功能是根据某个字符串，过滤掉这个字符串中的数字
    .filter("filterNum",[function () {
        // filterNum是过滤器的函数
        // 在这个匿名函数中，必须返回一个函数
        // 返回的这个函数才是要处理过滤的逻辑
        return function (str) {
            // str就是要处理的字符串
            return str.replace(/[0-9]/g,"")
        }
    }])

效果显示

Paste_Image.png