<!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. iOS开发XCODE5 SVN配置 使用办法 (转) 收藏一下

    标签: xcode5svn xcodesvn使用 xcode自带的svn xcodesvn版本操作 xcode自带svn版本   这两天响应老板要求,把所有代码放到公司的SVN服务器上,按照我的想法肯 ...

  2. eclipse查看class文件的源码

    eclipse查看class文件的源码: 1.网上下载jadClipse的jar包和执行文件jad.exe和 net.sf.jadclipse_3.3.0.jar. 2.把上面下载的jar包放在ecp ...

  3. iOS UIButton setTitle与setAttributedTitle

    今天遇到一个问题,查了好久,终于解决. 我需要根据不同的条件给uibutton赋不同的值,由于字体要求有不同颜色变化,所以我选择了一个条件下用setTitle,另一个条件下用setAttributed ...

  4. 史航416第九次作业&总结

    一.知识点总结: 1.二维数组定义的形式:类型名 数组名[行长度] [列长度] 例如:int a[3][2]:定义一个二维数组a,3行2列,6个元素: 2.二维数组引用的形式:类型名 数组名[行下标] ...

  5. appium远程调用appium server

    如何通过本地的代码,调用远程的server呢?   例如:我有两台电脑A(192.168.112.10)和B(192.168.112.11),那我怎么能在A执行本地脚本,但是使用B上的server呢? ...

  6. Java对象的序列化和反序列化

    对象的序列化是指将对象转换为字节序列的过程 对象的反序列化是指将字节序列恢复对象的过程 主要有两种用途: 1.把对象的字节序列永久地保存在硬盘上,通常放在一个文件中. 2.在网络上传输对象的字节序列. ...

  7. 解决“LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”问题

    更新VS2010,或者卸载VS2013安装2010后,建立项目时会出现"LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏"的错误 ...

  8. android隐藏底部虚拟键Navigation Bar实现全屏

    隐藏底部虚拟键Navigation Bar实现全屏有两种情况 第一种:始终隐藏,触摸屏幕时也不出现 解决办法:同时设置以下两个参数 View.SYSTEM_UI_FLAG_HIDE_NAVIGATIO ...

  9. jQuery 的属性

    一.显示和隐藏的属性  hide(隐藏),show(显示) 下面是例子 <script type="text/javascript"> $(document).read ...

  10. js 基本类型与引用类型的区别

    1. 基本类型: string,number,boolean,null,undefined 2. 引用类型: Function,Array,Object 访问方式                   ...