首页 > 代码库 > angular中的 ng-change

angular中的 ng-change

2024-08-18 06:53:34   217人阅读

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/查找" 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


联系
我们