<!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. 分享一个web存储方法

    https://github.com/zhujiasheng/jquery-cookie/blob/master/src/jquery.cookie.js https://github.com/WQT ...

  2. [Docker] docker 基础学习笔记1（共6篇）

    巩固一下yum: yum本身是centos自带的软件,可以删掉然后再重新安装. yum本身可以配置yum源,网络的,本地的都可以.之后安装docker需要配置一个扩展源.   从163的网址里边下载好 ...

  3. Struts框架——（二）Struts原理with登录实例

    二. Struts基本工作流程 假设现在有以下情景: 用户正在浏览一个用STRUTS的技术构建的网站主页,主页上有个登陆表单,用户填好登陆名和密码,单击"登陆"按钮,就激活了以下一 ...

  4. Android调试小技巧(LogCat不输出、Log自动清空、install时timeout)

    问题:有时候明明连接了设备,而LogCat却没有输出 解决方法:在device界面点一下对应设备,使其处于选中状态(它适用于查看手机文件不显示的情况) 问题:前面记录的Log看着看着突然被清空了 解决 ...

  5. Noip2016提高组 组合数问题problem

    Day2 T1 题目大意 告诉你组合数公式,其中n!=1*2*3*4*5*...*n:意思是从n个物体取出m个物体的方案数 现给定n.m.k,问在所有i(1<=i<=n),所有j(1< ...

  6. Java使用正则表达式取网页中的一段内容(以取Js方法为例)

    关于正则表达式: 表1.常用的元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串 ...

  7. SQL注入的原理以及危害

    SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符 ...

  8. hdu 5534 (完全背包) Partial Tree

    题目:这里 题意: 感觉并不能表达清楚题意,所以 Problem Description In mathematics, and more specifically in graph theory, ...

  9. mysql备份文件注释乱码处理工具

    我们有时候需要做mysql数据库的注释,可是备份出来的是乱码,怎么办呢? 本工具软件来帮你的忙. 将GBK库备份后的文本文件中夹带的UTF8乱码转换为GBK编码,就不再乱码了. http://down ...

  10. [LeetCode][Java]Triangle@LeetCode

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...