实现代码如下

<!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. [译]如何在.NET Core中使用System.Drawing？

    你大概知道System.Drawing,它是一个执行图形相关任务的流行的API,同时它也不属于.NET Core的一部分.最初是把.NET Core作为云端框架设计的,它不包含非云端相关API.另一方 ...

  2. 第一册：lesson seventy one.

    原文: He is awful. A:What's Ron Marston like , Pauline? B:He is awful.He telephoned me four times yest ...

  3. .NET使用ServerManager获取网站物理路径

    最近因为工作需要,用wpf做了一个辅助小工具,如下图 为了获取网站的物理路径,我分析了通过ServerManager获取到的变量,也通过百度搜索了很多,但仍然没有找到方法. 后来使用必应,在国外网站找 ...

  4. 介绍一款文档神器：pandoc

    http://pandoc.org/ 因为工作需要,将一批markdown的文档转换成word文档,找来找去,这个pandoc真是神器 啊,推荐给大家 If you need to convert f ...

  5. SSH整合jar包分享及登陆实例详解

    相关jar包分享:struts2+hibernate3+spring3 以及aop ,mysql,以及整合必须包. 链接:https://pan.baidu.com/s/1nCHmSsKU0hiV8D ...

  6. Java并发编程-ReentrantReadWriteLock

    基于AQS的前世今生,来学习并发工具类ReentrantReadWriteLock.本文将从ReentrantReadWriteLock的产生背景.源码原理解析和应用来学习这个并发工具类. 1. 产生 ...

  7. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  8. PNG,GIF,JPG的区别及如何选

    GIF: 1:256色 2: 无损,编辑 保存时候,不会损失. 3:支持简单动画. 4:支持boolean透明,也就是要么完全透明,要么不透明 JPEG: 1:millions of colors 2 ...

  9. Java中单例实现

    1:.经典懒汉: 代码如下: package org.pine.test; public class Person { private String name; private int age; pu ...

  10. 网页字体在Frontpage2000制作网页中的讲解

    运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...