实现代码如下

<!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. 南大算法设计与分析课程复习笔记(2)L2 - Asymptotics

    一.几种比较复杂度的符号 数据结构有描述,相关严格数学定义也不想说了,就这么过了吧. 二.最大子数组的几种解决方法 从最复杂的暴力解法过渡到最简单的动态规划 解析和代码见这里:http://www.c ...

  2. Ubuntu 安装 JDK8 的两种方式

    ubuntu 安装jdk 的两种方式: 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgrade 方式方便获得jdk的升级 使用pp ...

  3. win10 uwp 商业游戏 1.2.1

    上一个游戏已经告诉大家如何写多个游戏,现在继续写这个无聊的游戏 希望大家在看这篇文章之前先看win10 uwp 商业游戏,在这个文章告诉了大家如何创建游戏. 修改数值 可以从上一篇的博客的游戏看到升级 ...

  4. cronolog日志切割catalina.out

    cronolog日志切割catalina.out (一)解压安装cronolog 1:wget  https://files.cnblogs.com/files/crazyzero/cronolog- ...

  5. ASP.NET MVC 学习笔记-7.自定义配置信息

    ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, <appSettings> <add key="LogInf ...

  6. [日常] MySQL数据库持久连接

    2018年5月18日 记录: 数据库持久连接: 1.持久的数据库连接是指在脚本结束运行时不关闭的连接.当收到一个持久连接的请求时.PHP 将检查是否已经存在一个(前面已经开启的)相同的持久连接.如果存 ...

  7. spring2.0：The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. You must configure either th

    提示系统时区出现错误,可以在mysql中执行命令: set global time_zone='+8:00' 或者在数据库驱动的url后加上serverTimezone=UTC参数 jdbc:mysq ...

  8. Hibernate入门(一)

    1.导包 导入Hibernate最基本的包(不要忘记导入数据库驱动包了!) 下载文件名为黄色框框中的名称的压缩包在对应路径下,有个required包下的所有包就是必备的基本包 2.建表 USE TES ...

  9. String的坑

       想必大家在熟悉不过了,不错今天就遇到了这个万年坑,哪怕喜欢翻源码的人,也不屑一顾翻它的源码,良言相劝最好翻下源码. 1. String为啥被定义为final ? 2. String是线程安全的么 ...

  10. Laravel 系列入门教程（一）【最适合中国人的 Laravel 教程】

    热烈庆祝 Laravel 5.5 LTS 发布! 实际上 Laravel 上一个 LTS 选择 5.1 是非常不明智的,因为 5.2 增加了许许多多优秀的特性.现在好了,大家都用最新的长期支持版本 5 ...