实现代码如下

<!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. 在vue中配置flow类型检查

    flow中文文档:https://zhenyong.github.io/flowtype/docs/objects.html#_ 1.安装flow npm install --save-dev flo ...

  2. [转]RPA简介

    本文转自:https://www.cnblogs.com/wendyzheng/articles/9211530.html 开篇: 公司正在全面推广RPA,正好借此机会学习一下,发现国内对RPA的了解 ...

  3. EF Code First 导航属性 与外键（转载）

    EF Code First 导航属性 与外键 一对多关系 项目中最常用到的就是一对多关系了.Code First对一对多关系也有着很好的支持.很多情况下我们都不需要特意的去配置,Code First就 ...

  4. mybatis_05动态SQL_if和where

    If标签:作为判断入参来使用的,如果符合条件,则把if标签体内的SQL拼接上. 注意:用if进行判断是否为空时,不仅要判断null,也要判断空字符串‘’: Where标签:会去掉条件中的第一个and符 ...

  5. Zipkin分布式跟踪系统介绍

    Zipkin是什么Zipkin分布式跟踪系统:它可以帮助收集时间数据,解决在microservice架构下的延迟问题:它管理这些数据的收集和查找:Zipkin的设计是基于谷歌的Google Dappe ...

  6. Hibernate(十三)迫切内连接fetch

    迫切内连接fetch 内连接和迫切内连接的区别: 其主要区别就在于封装数据,因为他们查询的结果集都是一样的,生成底层的SQL语句也是一样的. 1.内连接:发送就是内连接的语句,封装的时候将属于各自对象 ...

  7. Java基础IO流(一)

    IO概念: 大多数应用程序都需要实现与设备之间的数据传输,例如键盘可以输入数据,显示器可以显示程序的运行结果等.在Java中,将这种通过不同输入输出设备(键盘,内存,显示器,网络等)之间的数据传输抽象 ...

  8. 4：Python的while循环

    while循环: while count<10: print(count) #count=100 count=count+1 print(123) while循环break:终止所有循环 cou ...

  9. javascript event 事件解析

    event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout ...

  10. AOJ1370: Hidden Anagrams(hash)

    题意 题目链接 Sol 直接对出现的次数hash即可,复杂度\(O(26n^2)\) 一开始没判长度条件疯狂wa #include<bits/stdc++.h> //#define int ...