首页 > 代码库 > 轻松Angularjs实现表格按指定列排序
轻松Angularjs实现表格按指定列排序
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来控制排序是升序还是降序,在点击时通过判断他们的来实现我们想要的效果。
你们还有什么简单方法么,拿出来分享一下吧!
轻松Angularjs实现表格按指定列排序
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。