<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="angular.min.js"></script>
<script>
var t=true;
var m1=angular.module('app',[]);
m1.controller('myapp',['$scope','$filter',function($scope,$filter){
$scope.olddata=[
{name:'张三',age:'18'},
{name:'李四',age:'32'},
{name:'李一',age:'22'},
{name:'王五',age:'17'},
{name:'阿达西',age:'35'}
];
$scope.datalist=$scope.olddata
$scope.fn=function(arr){
$scope.datalist = $filter('orderBy')($scope.datalist,arr,t);
t=!t;
};
$scope.search=function(){
$scope.datalist = $filter('filter')($scope.olddata,$scope.value)
}
}])
</script>
<body ng-controller="myapp">
<input type="text" ng-model="value" /><input type="button" value="搜索" ng-click="search()" />
<table border="1" >
<tr>
<th ng-click="fn('name')">name</th>
//这里需要注意一下，调用方法需要传参的时候，参数需要再加个引号！！
<th ng-click="fn('age')">age</th>
</tr>
<tr ng-repeat="data in datalist">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</table>
</body>
</html>
最终效果：
123.jpg
1：点击name或者age可以自动排序，再次点击相反排序
2：搜索姓名或者年龄可以得到想要的数据
网友评论