<!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>