<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="js/angular.min.js"></script>
</head>
 
<body>
<div ng-controller="main">
<!--ng-change 函数重点 ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作-->
<input type="text" ng-model="userinput" ng-change="handleChange()"/>
<!--ng-click 函数重点-->
<input type="button" value="查找" ng-click="check()">
<table border=1>
<thead>
<!-- //传参数是字符串要加上引号 -->
<th ng-click="handleNameClick()">姓名</th>
<th ng-click="handleAgeClick()">年龄</th>
</thead>
<tbody>
 
<tr ng-repeat="data in datalist">
 
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</tbody>
 
</table>
 
</div>
 
 
<script>
 
var m1 = angular.module('myApp',[]);
m1.controller('main', ['$scope',"$filter", function($scope,$filter){
$scope.datalist = [
{name:"ccc",age:10},
{name:"aaa",age:50},
{name:"eeee",age:30},
{name:"addd",age:20},
{name:"bbb",age:40},
]
 
//此处是重点，虽然是浅复制，但是效果也是一样，
//为什么要进行复制呢?主要是因为，当你搜索的时候，显示出效果，然后按backspace键的时候，下面的表格可以恢复到没有搜索以前的样子
//若果不进行复制，则搜索完之后，表格中的内容返回不回来了
var datalist = $scope.datalist;
 
$scope.isNameClicked = false;
$scope.isAgeClicked = false;
$scope.handleNameClick =function(){
$scope.datalist = $filter("orderBy")($scope.datalist,"name",$scope.isNameClicked);
//为什么要进行true 和false 的转换，可以反复的进行排序，要不然只能进行一次排序，然后就返回不会来了。
$scope.isNameClicked = !$scope.isNameClicked;
}
 
$scope.handleAgeClick =function(){
$scope.datalist = $filter("orderBy")($scope.datalist,"age",$scope.isAgeClicked);
$scope.isAgeClicked = !$scope.isAgeClicked;
}
 
 
$scope.handleChange = function(){
//$scope.userinput 输入框中的内容 ，datalist为 数组中的数据
//filter也是关键字。相当于orderBy
 
$scope.datalist = $filter("filter")(datalist,$scope.userinput);
console.log($scope.datalist);
console.log(datalist);
}
}])
 
</script>
</body>
</html>
 

angular中的 ng-change的更多相关文章

  1. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  2. ui-router中的锚点问题（angular中的锚点问题）

    angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...

  3. angular中的表单验证

    angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...

  4. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  5. angular源码分析：angular中的依赖注入式如何实现的

    一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...

  6. angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...

  7. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  8. Angular中Constructor 和 ngOnInit 的本质区别

    在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...

  9. Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing

    今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This ...

  10. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

随机推荐

  1. 史航416第十次作业&总结

    作业1: 计算两数的和与差.要求自定义一个函数 #include <stdio.h> void sum_diff(float op1,float op2,float *psum , flo ...

  2. ES 集群

    http://www.cnblogs.com/o-andy-o/p/5067184.html

  3. Win32 RGB三原色

    以前看到三原色的图案,一直很好奇是如何画出来.后来终于搞清楚了,其实很简单,实际上就是RGB三个分量的"位与"运算. 下面给出Win32绘制三原色图案的例子,特此记录在此: #in ...

  4. sql server 数据遍历插入表变量

    )) DECLARE @str VARCHAR(MAX) ,) ,@start INT ,@end INT ,) SET @str = '1,2,3,4,5,6,7,8' SET @split = ' ...

  5. NPOI支持excel2003和excel2007

    IWorkbook wk = null; if (filePath.ToLower() == ".xls") { wk = new HSSFWorkbook(fs); } else ...

  6. 转-servlet 获取 post body 体用流读取为空的问题

    目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式.在Java servlet或者springmvc中可以通过如下代码来获取并图片通过流方式传输 ...

  7. OC对象的归档及解档浅析

    一般用在用户登录,保存这个用户的信息 对象归档,就是把内存中对象持久化. 对象解档,就是把持久化的对象读取到内存. oc中对象归档解档大致分为以下几种方法: 从数量上可以分为: 对单个对象归档解档 对 ...

  8. c++的默认构造函数 VS 深拷贝(值拷贝) 与 浅拷贝(位拷贝)

    C++默认为类生成了四个缺省函数: A(void); // 缺省的无参数构造函数 A(const A &a); // 缺省的拷贝构造函数 ~A(void); // 缺省的析构函数 A & ...

  9. VS2008设置断点不命中

    网上试了各种办法都不好使,最后想到要修复一下,其实只要重置一下开发环境就好了,具体方法如下: 开始 --> Microsoft Visual Studio 2008 --> Visual ...

  10. iOS8 定位补充

    iOS 8定位补充 iOS 8定位需要修改2个地方 1.info.plist文件中添加NSLocationAlwaysUsageDescription:描述信息 从iOS 8开始,用户定位分两种情况 ...