用angular做的模糊搜索
今天大家来试一试用angular做一下简单的搜索功能吧;
首先我们需要写html的部分,我们需要设置几个条件,比如按什么来排序,按升序还是降序搜索,和一个文本框来设置模糊搜索;
<nav>
<select ng-model="a">
<option value="num">按编号排序</option>
<option value="name">按姓名排序</option>
<option value="age">按年龄排序</option>
</select>
<select ng-model="b">
<option value="">升序</option>
<option value="">降序</option>
</select>
<input type="text" ng-model="s"/>
</nav>
设置上ng-model好在接下来用angular来获取动态的值,方便我们搜索,接下来我们先写js的部分吧;
首先我们需要先引入一个angular,在js中创建angular的模块部分和控制台。之后我们创建一个json文件来保存一下我们需要查询的数据,之后我们在控制台中获取一下这个json文件中的数据内容,方便我们导入到html中来搜索。
{
"xinxi":[
{"num":100,"name":"baobo","age":12},
{"num":99,"name":"paopo","age":18},
{"num":50,"name":"xinxin","age":55},
{"num":55,"name":"angular","age":20},
{"num":75,"name":"chali","age":15},
{"num":85,"name":"each","age":60},
{"num":98,"name":"hello","age":19},
{"num":68,"name":"zizizi","age":28},
{"num":66,"name":"gegege","age":56},
{"num":77,"name":"fufuf","age":43},
{"num":42,"name":"baobo","age":12},
{"num":54,"name":"menmen","age":32},
{"num":88,"name":"qqqq","age":71},
{"num":69,"name":"laowang","age":22},
{"num":53,"name":"wangwang","age":99},
{"num":1,"name":"dadad","age":88}
]
}
这是我所创建的json文件。
var app=angular.module("mk",[]);
app.controller("text",function($scope,$http){
$http.get("paixu.json").success(function(data){
$scope.data=data.xinxi
$scope.a="num"
})
});
这是我所创建用来获取json文件的代码;
注意$scope.a = “num”;是为了和上面获取的动态数据相对应的,并且是让数据先按什么先排序。
之后我们只需要把这些数据填到html部分就可以了。
<table border="0px" id="table">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="value in data | orderBy:b+a | filter:s">
<td>{{value.num}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
</table>
ng-repeat="value in data | orderBy:b+a | filter:s;这是充分运用了angular中的过滤器属性,orderBy是排序问题,注意一定要先把升序和降序的动态数据放到前面防止出错,filter这个过滤器就是把我们所搜索的数据和我们的json数据库中作比较,json中哪一下标的数组中有我们搜索的数据就显示出来,没有则隐藏。
用angular做的模糊搜索的更多相关文章
- angular做的简单购物车
虽然本人也是刚刚才开始学习angular.js,并不是非常会,但是这并不能阻止我对angular的喜爱.因为它太省代码了,比如说一个比较简单的购物车,就是只有商品名称,单价,数量,小计,总计和删除功能 ...
- 用angular怎么缓存父页面数据
angular做单页面应用是一个比较好的框架,但是它有一定的入门难度,对于新手来说可能会碰到很多坑,也有许多难题,大部分仔细看文档,找社区是能解决的. 但有些问题也许资料比较少,最近遇到过一个要缓存父 ...
- Nodejs之MEAN栈开发(五)---- Angular入门与页面改造
这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...
- Deferred在jQuery和Angular中的使用与简单实现
Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...
- [转贴]有关Angular 2.0的一切
对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...
- angular实现了一个简单demo,angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- 使用angular.js开发的一个简易todo demo
前沿 在CVTE实习考察的一周里,接触到了angular,并在最后的一天任务里要求使用angular做一个功能主要包括创建.编辑.恢复.删除以及留言的todo demo,并支持响应式布局.因为之前没怎 ...
- (译) Angular运行原理揭秘 Part 1
当你用AngularJS写的应用越多, 你会越发的觉得它相当神奇. 之前我用AngularJS实现了相当多酷炫的效果, 所以我决定去看看它的源码, 我想这样也许我能知道它的原理. 下面是我从源码中找到 ...
- 【转】Angular运行原理揭秘 Part 1
当你用AngularJS写的应用越多, 你会越发的觉得它相当神奇. 之前我用AngularJS实现了相当多酷炫的效果, 所以我决定去看看它的源码, 我想这样也许我能知道它的原理. 下面是我从源码中找到 ...
随机推荐
- Android面试常问到的知识点
一.算法,数据结构 1.排序算法 2.查找算法 3.二叉树 4.广度,深度算法: 二.java基础 1.集合Collection,List,Map等常用方法,特点,关系: 2.线程的同步,中断方式有几 ...
- jmeter ---集合点使用方法:Synchronizing Timer
LR中集合点可以设置多个虚拟用户等待到一个点,同时触发一个事务,以达到模拟真实环境下多个用户同时操作,实现性能测试的最终目的. jmeter中使用Synchronizing Timer实现Lr中集合点 ...
- 关于audio标签播放跨域的问题
遇到过的错误: DOMException: The play() request was interrupted by a new load request. DOMException: Failed ...
- EM5-PE2B
1. vocabulary once adv. 一次,曾经 They cocktailed once every week. He once lived in shanghai. twice adv ...
- linux学习笔记27--监控命令ps和top,free
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- The Definitive Guide To Django 2 学习笔记(九) 第五章 模型 (一)数据库访问
以MySql数据库为例,先到http://dev.mysql.com/downloads/connector/python/处下载MysqlConnector for python的连接器. from ...
- 如何使用NFS
这两个网卡之间可以通信的,如图所示 也可以写成具体的ip地址,或者ip地址段例如192.168.1.2-200 注意看下面这幅图,路径一定要写完整 下面开始挂载共享的目录 挂载之后什么都没有出现说明挂 ...
- Ubuntu/Mac彻底解决手机ADB识别问题
之前写过一篇同样解决手机识别问题的文章(http://www.cnblogs.com/benhero/p/4202967.html) ,不过今天在遇到特殊手机"魅族"!之前的解决方 ...
- FireFox插件FirePHP调试PHP
如果你和我一样,你会在开发网页项目时候完全无法离开FireBug.这个小巧的"臭虫"是一个神奇而有用的HTML/CSS/JavaScript/Ajax调试器.但是你也许不知道这个还 ...
- JAVA8之lambda表达式详解,及stream中的lambda使用
分享文章:https://blog.csdn.net/jinzhencs/article/details/50748202