1. 在项目中,会遇到初始化页面是一个列表,但页面中包含有一个input搜索框,输入关键字搜索的时候,列表需要实时变化,列表条目总数也需要实时变化。类似下图的需求。
解决方案如下:
<input placeholder="输入镜像名称查找" ng-model="projectImageKey"/>
<ul>
<li ng-repeat="item in projectImagesFiltered=(imageProjectCollections|filter:{'projectCollectionName':projectImageKey})|orderBy:'projectCollectionName'"></li>
</ul>
说明:
projectImageKey:表示输入的搜索关键字
item : 表示列表数据里面的每一条目
imageProjectCollections:拿到的最原始的数据列表
projectCollectionName : 列表进行排序的关键字段
projectImagesFiltered :经过排序(orderby),经过过滤(filter)之后的数据
li的这句话要做的事就是:①原始数据列表imageProjectCollections按照列表每一条item里的属性projectCollectionName排序 ②再对上一步得到的数据列表进行过滤(过滤条件是projectCollectionName属性与搜索关键字projectImageKey相同的数据)得到一个新的列表 ③将经过一系列处理的数据列表赋值给一个变量projectImagesFiltered,这样就可以做到搜索实时变化列表,用projectImagesFiltered获取到的length也是实时变化的