实现代码如下

<!DOCTYPE html>

<html ng-app="myServiceApp">

	<head>

		<meta charset="UTF-8">

		<title>$watch实现input监听--并向后台发出HTTP请求</title>

		<!--引入第三方样式库bootstrap.min.css-->

		<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" />

		<link rel="stylesheet" href="css/main.css" />

		<!--引入js库anglarjs-->

	    <script type="text/javascript" src="framework/angular-1.5.5/angular.js"></script>

	    <script type="text/javascript" src="js/service.js"></script>

	</head>

	<body>

		<div class = "form-group col-sm-6 main" ng-controller="ServiceController">

	     	<label for = "name" class="pull-left">用户名</label>

	     	<input type = "text" class = "form-control" ng-model="userName" placeholder = "用户名"/>

	     	<div class="pad-t-5">

		     	<table class="table table-bordered table-hover">

					  <thead>

					    <tr>

					      <th>序号</th>

					      <th>用户名</th>

					      <th>年龄</th>

					      <th>电话号码</th>

					      <th>所在部门</th>

					    </tr>

					  </thead>

					  <tbody>

						  <tr ng-repeat="users in usersList">

							    <td>{{$index+1}}</td>

							    <td>{{users.userName}}</td>

							    <td>{{users.age}}</td>

							    <td>{{users.phoneNumber}}</td>

							    <td>{{users.department}}</td>

						    </tr>

					  </tbody>

			    </table>

		    </div>

	   </div>

	</body>

</html>

service.js

<script type="text/javascript">

	var myService = angular.module('myServiceApp',[]);

	//共用的controller抽成Service

	myService.factory('userListService', ['$http',

    	function($http){

    		//doRequest处理请求

    		var doRequest = function(userName, path){

    			return $http({

    				method: 'GET',

		            url: 'cardInfo/users.json'

    			});

    		}

    		return {

    			userList : function(userName){

    				return doRequest(userName, 'userList');

    			}

    		}

    	}

	]);

	//控制器调用service

	myService.controller('ServiceController', ['$scope','$timeout', 'userListService',

    	function($scope, $timeout, userListService){

    		//监听数据模型ng-model

    		var timeout;

    		$scope.$watch('userName', function(newUserName){

    			if(newUserName){

    				if(timeout){

    					$timeout.cancel();

    				}

    			}

    			timeout = $timeout(function(){

    				userListService.userList(newUserName).success(function(data, status){

    					$scope.usersList = data;

    				})

    			},350)

    		});

    	}

	]);

</script>

Angular中$watch实现控件改变后实时发送HTTP请求的更多相关文章

  1. 支持Angular 2的表格控件

    前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...

  2. Angular 2的表格控件

    Angular 2的表格控件 前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular ...

  3. Angular 实现Bootstrap ScrollSpy控件

    Bootstap是基于JQuery开发,Angular中不支持Bootstrap相关事件逻辑.本文基于Typecript开发了一个Angular可用的ScrollSpy控件.Scrollspy控件主要 ...

  4. IE11浏览器中的My97日历控件刷新后无法打开问题解决办法

    IE11浏览器中的My97日历控件刷新后无法打开问题解决办法   IE11浏览器中的My97日历控件刷新后无法打开问题解决办法:(谷歌浏览器下正常.IE11失效) 解决办法:1:找到WdatePick ...

  5. easyui时间控件用js实时获取选定的时间的取法

    easyui时间控件用js实时获取选定的时间的取法var   datetime=$("#id").datetimebox("getValue");不能用 $(& ...

  6. WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色

    本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的 ...

  7. JS实现日历控件选择后自动填充

    最近在做人事档案的项目,在做项目的初期对B/S这块不是很熟悉,感觉信心不是很强,随着和师哥同组人员的交流后发现,调试程序越来越好了,现在信心是倍增,只要自己自己踏实的去研究.理解代码慢慢的效果就出来了 ...

  8. DevExpress某些控件继承后的可编辑性

    今天在使用DevExpress的BarManager菜单控件时,发现在进行继承时无法在继承的子类窗体中对其进行编辑与修改,另外像GridView也有类似的情形,后来查阅资料后,现在可通过DevExpr ...

  9. C++ OCX控件开发后出现的注册问题

    error MSB3075: 命令“regsvr32 /s /c "F:\JOBS\项目\格网数据的动态三维可视化\Dev\GridDynamicDisplay\gdiplusplot\GD ...

随机推荐

  1. 金三银四招聘季，这些BAT以及独角兽互联网公司官方招聘网站值得关注。(个人梳理备用：附BAT以及独角兽公司官方招聘网址)

    金三银四是一年当中的招聘最旺盛的时期,即招聘高峰期,在这个期间内有非常多名企巨头公司的放出大量的岗位信息.以博主几年的工作经验来看,在这期间找到称心如意的工作的几率大大提升,对于很多程序员来说,薪水高 ...

  2. Font Awesome 供更精准的图标搜索

    https://www.thinkcmf.com/font/font_awesome/icon/address-book

  3. IIS Tomcat共享80端口

    为什么有这种需求, 原因是这样的, 公司有一个Java的web项目,在另一台服务器A上,最近老板一时兴起,想把他合并到这台稳定点的服务器B上,服务器B上使用IIS来寄宿asp.net 网站, 怎么办呢 ...

  4. Webapi创建和使用 以及填坑（二）

    Webapi创建和使用 以及填坑(二) 上篇文章由于时间问题没能讲到POST提交,今天做一个补充 POST: 当我们直接通过POST发送方式发送会发现错误信息 参考解决:https://www.cnb ...

  5. 关于laravel5 消息订阅/发布的理解初

    laravel5.4感觉官网文档说滴不够详细...安装predis官网很详细,这里略过.... 生成命令 直接使用 Artisan 命令 make:command,该命令会在 app/Console/ ...

  6. mybatis_04 resultType和resultMap区别

    resultType 使用resultType进行结果映射时,查询的列名和映射的pojo属性名完全一致,该列才能映射成功. 如果查询的列名和映射的pojo属性名全部不一致,则不会创建pojo对象: 如 ...

  7. Java多线程之内存可见性

    阅读本文约“3分钟” 共享变量在线程间的可见性 synchronized实现可见性 volatile实现可见性 —指令重排序 —as-if-serial语义 —volatile使用注意事项 synch ...

  8. 汇编语言--微机CPU的指令系统（五）（位操作指令）

    (6) 位操作指令 1.位扫描指令(Bit Scan Instruction) 指令的格式:BSF/BSR Reg, Reg/Mem ;80386+ 受影响的标志位:ZF 位扫描指令是在第二个操作数中 ...

  9. 数据库sql语句常见面试题

    转载:本文转载自:https://blog.csdn.net/woshinidedege/article/details/78659202 一．有以下几张表及表结构Student(Sid,Sname, ...

  10. canvas-7global.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...