闲来无事,写一个简单的angular的搜索框。
1.要求:
利用 AngularJS 框架实现手机产品搜索功能,题目要求: 1)自行查找素材,按照原有数据格式将手机产品数据丰富到至少10个以上 2)自行设计页面,需要包含“搜索条件部分”,“手机信息显示部分” 3)当更改任何搜索条件时,需要实时显示搜索结果在“显示部分”中 4)搜索条件具体要求: 搜索框(匹配操作系统、产品名、产商进行模糊查询) 价格区间(开始价格~结束价格)
2.需求分析:
首先,我们需要将商品渲染到页面上。
其次,当我们输入搜索框文本时,动态显示符合搜索框文本的商品。
其中,动态指的时我们每输入一个字符,都会进行产品的筛选。
最后,价格的上下限也是同样的原理。
那么,这样一来,我们使用angular是最为方便的。因为angular对双向数据的支持非常好。
3.实际代码:
1)HTML代码: