[ionic开源项目教程]

过滤器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