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


猜你喜欢

转载自blog.csdn.net/WXY19951125/article/details/79899033