实现代码如下

<!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. Webapi--Webapi 跨域链接

    1]创建 WebAPIWebAPI WebAPI,新建 ,新建 ->项目 ->ASP.NET Web >ASP.NET Web >ASP.NET Web >ASP.NET ...

  2. CheckForIllegalCrossThreadCalls = false 是干嘛的?

    public Form1() {     InitializeComponent();     CheckForIllegalCrossThreadCalls = false; }       在多线 ...

  3. http协议、web服务器、并发服务器（上）

    目录 1. HTTP格式 1.1 HTTP GET请求的格式: 1.2 HTTP POST请求的格式: 1.3 HTTP响应的格式: 2. Web静态服务器-显示固定的页面 3. Web静态服务器-显 ...

  4. JavaScript是如何工作的：事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式！

    摘要: 深度理解JS事件循环!!! 原文:JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! 作者:前端小智 Fundebug经授权转载, ...

  5. Java中单例实现

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

  6. 通过css3实现的动画导航菜单代码

    用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...

  7. JS实现缓动效果-让div运动起来

    var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ( ...

  8. SuperMap iClient for JavaScript image出图

    SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问 ...

  9. MySQL 横向表分区之RANGE分区小结

    MySQL 横向表分区之RANGE分区小结 by:授客 QQ:1033553122 目录 简介 1 RANGE分区 1 创建分区表 1 查看表分区 2 新增表分区 2 新增数据 3 分区表查询 3 删 ...

  10. Android Studio 无法预览xml布局视图：failed to load AppCompat ActionBar with unkNown error

    问题如下: 解决方法: 找到res-->values-->styles.xml 文件 可以看到主题Them设置如下: 修改为: 界面预览可以正常显示