[ionic开源项目教程] - 第6讲 过滤器filter的使用

过滤器filter的使用

1.回顾

再熟悉一下tab1.html的代码：

<div class="list">
      <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
        <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
        <h3>{{::item.title}}</h3>
        <p>{{::item.description | substring:item.description}}</p>
      </a>
    </div>

代码中有一个地方很特别，就是p标签中的{{::item.description | substring:item.description}} ，意思就是调用了一个substring的函数，该函数接收一个string类型的参数。

2.过滤器

(1.1)新建：在www/js/文件夹中再新建一个js，取名为config.js。代码如下：

angular.module('starter.filter', [])
.filter('substring', function () {
    return function (str) {
        if (str.length >= 40) {
            return str.substr(0, 40) + "...";
        }
        return str;
    }
})

(1.2)依赖： 在app.js 中添加对过滤器的依赖；

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','starter.filter'])

(1.3)使用：在视图层中的使用方式。

 <p>{{::item.description | substring:item.description}}</p>

至于为什么要使用过滤器，我放两张图一看就明白了。

[图1]

图2