300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > angular项目随笔——前端实现实时搜索展示搜索列表

angular项目随笔——前端实现实时搜索展示搜索列表

时间:2018-12-04 19:14:40

相关推荐

angular项目随笔——前端实现实时搜索展示搜索列表

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也是实时变化的

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。