angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行。
html:
<input type="text" ng-model="search"/> <table border="1" cellpadding="0" cellspacing="1" width="400px"> <tr> <th ng-click="click()">编号</th> <th ng-click="click1()">姓名</th> <th ng-click="click2()">年龄</th> </tr> <tr ng-repeat="item in data|orderBy:a+b+c|filter:search"> <td>{{item.number}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </table>
js:
var app=angular.module(‘mk‘,[]); app.controller(‘test‘,function($scope,$http){ $http.get(‘json.json‘).success(function(data){ $scope.data=data.nr }); $scope.a=‘number‘; $scope.b=‘name‘; $scope.c=‘age‘; $scope.click=function(){ if($scope.a==‘number‘){ $scope.a=‘-number‘; $scope.b=‘‘; $scope.c=‘‘; }else{ $scope.a=‘number‘; $scope.b=‘‘; $scope.c=‘‘; } }; $scope.click1=function(){ if($scope.b==‘name‘){ $scope.a=‘‘; $scope.b=‘-name‘; $scope.c=‘‘; }else{ $scope.a=‘‘; $scope.b=‘name‘; $scope.c=‘‘; } }; $scope.click2=function(){ if($scope.c==‘age‘){ $scope.a=‘‘; $scope.b=‘‘; $scope.c=‘-age‘; }else{ $scope.a=‘‘; $scope.b=‘‘; $scope.c=‘age‘; } } })
此方法还需引用json文件:
{ "nr":[ {"number":34,"name":"Angular","age":24}, {"number":24,"name":"Blue","age":25}, {"number":14,"name":"Fertn","age":23}, {"number":43,"name":"Onfer","age":26}, {"number":36,"name":"Wang","age":21}, {"number":31,"name":"Linla","age":30}, {"number":4,"name":"San","age":28}, {"number":6,"name":"Ring","age":22}, {"number":76,"name":"Cone","age":31}, {"number":32,"name":"Perter","age":32}, {"number":32,"name":"Nert","age":27}, {"number":15,"name":"Ding","age":29} ] }
我是用过滤器 orderBy:‘id‘:a+b+c来控制排序是升序还是降序,在点击时通过判断他们的来实现我们想要的效果。
你们还有什么简单方法么,拿出来分享一下吧!
时间: 2024-11-05 15:54:33