<!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. python动态获取对象的属性和方法 （转载）

    首先通过一个例子来看一下本文中可能用到的对象和相关概念. #coding:utf-8 import sys def foo():pass class Cat(object): def __init__ ...

  2. 初学c# -- 学习笔记（五） winfrom自定义滚动条

    找了些例子,要么庞大.要么搞个安装组件什么的,我要求能用就行了.实在找例子修改麻烦,就做了一个.其实实现挺简单,就是panel或图片什么的跟着鼠标走就行了. 这里panel自己可以加背景图或直接搞个图 ...

  3. 我的新博客：www.wangyufeng.org

    新博客:www.wangyufeng.org 博客园的博客不更新啦.

  4. mysql workbench

    下载地址:http://dev.mysql.com/downloads/ 详情:http://baike.baidu.com/link?url=sWV3b2pWdr8cvCxEZYrB9CzLD9Bl ...

  5. String、StringBuffer、StringBuilder的区别

    在日常开发过程中String字符串估计是被用到最多的变量了,最近看了一些String.StringBuffer和StringBuilder的东西,三者都可以对字符串进行操作,他们究竟有什么区别,以及适 ...

  6. ThinkPad L440 FN键设置

    刚入手了ThinkPad L440,用起来相当不错,嘿嘿! L440系统默认(F1-F12)键盘为系统默认功能键,主要控制音量.亮度.连接投影仪等. 因为编写程序需要调试,经常用到F10,F11等键, ...

  7. Ubuntu root 密码 sudo passwd

    用vmware安装好ubuntu后,su - 切换不到root,提示密码错误. 解决办法: 1.用当前登录用户打开终端,在终端输入命令 sudo passwd,输入当前用户的密码然后回车 2.会提示输 ...

  8. Tomcat单向Https验证搭建，亲自实现与主流浏览器、Android/iOS移动客户端安全通信

    众所周知,iOS9已经开始在联网方面默认强制使用Https替换原来的Http请求了,虽然Http和Https各有各的优势,但是总得来说,到了现在这个安全的信息时代,开发者已经离不开Https了. 网上 ...

  9. JavaScript语法结构

    一:字符集 1.区分大小写 JavaScript是区分大小写的语言 所有的标识符(identifier)都必须采取一致的大小写形式 但是Html并不区分大小写(尽管Xhtml区分) 2.空格.换行符和 ...

  10. js--webSocket入门

    Websocket 1.websocket是什么? WebSocket是为解决客户端与服务端实时通信而产生的技术.其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接, 此 ...