Angular table Click the sequence number to ascending, click again in descending order, enter the information in the input box, the row corresponding to the data.
Html:
<input type = "text" ng-model = "search" />
<table border = "1" cellpadding = "0" cellspacing = "1" width = "400px">
<tr>
<th ng-click = "click ()"> ID </ th>
<th ng-click = "click1 ()"> Name </ th>
<th ng-click = "click2 ()"> Age </ 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>
ls|
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‘;
}
}
})
This method also needs to reference the JSON file:
{ "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}
]
}
I use the filter order: ' ID ': A+b+c to control whether the sort is ascending or descending, and when clicked, by judging them to achieve the effect we want.
Is there any simple way for you to share it?
Easy ANGULARJS Implementation table sorted by specified column