<body>
<div ng-app= "myApp" ng-controller= "Myctrl" >
<table border= "1" cellspacing= "0" cellpadding= "5" width= ">"
<tr>
<th ng-click= "Sort ($event)" > Serial number </th>
<th ng-click= "Sort ($event)" > Song name </th>
<th ng-click= "Sort ($event)" > Singers </th>
</tr>
<tr ng-repeat= "N in Names|orderby:flag" align= "Center" >
<td>{{n.no}}</td>
<td>{{n.name}}</td>
<td>{{n.singer}}</td>
</tr>
</table>
</div>
<script>
var app=angular.module (' myApp ', []);
App.controller ("Myctrl", function ($scope) {
$scope. names=[
{no:1,name: "In the World", singer: ' Wang Building House '},
{no:2,name: "Non-Emirates", Singer: ' Silming '},
{no:3,name: "Wonderwall", Singer: ' Oasis '},
{no:4,name: "We are Different", singer: ' Big Strong '},
{no:5,name: "Fairy Tale Town", singer: ' Chen's son '},
{no:6,name: "Ride the Wind of Time", singer: ' Wan Si 妤 '},
{no:7,name: "Supersonic", Singer: ' Oasis '},
{no:8,name: "London Loves", singer: ' Blur '},
];
$scope. Sort=function (e) {
Console.log (e);
var th=e.target,
Tr=th.parentnode,
Ths=tr.getelementsbytagname ("th"),
Filed= "";
if (th.innertext== ' serial number ') {
Field= ' no ';
}else if (th.innertext== ' song name ') {
field= ' name ';
}else if (th.innertext== ' singer ') {
Field= ' singer ';
}
for (Var i=0;i<ths.length;i++) {
if (Th!=ths[i]) {
Ths[i].classname= ";
}
}
if (th.classname== ' desc ') {
Th.classname= ' ASC ';
$scope. Flag=field;
}else if (th.classname== ' ASC ') {
Th.classname= ' desc ';
$scope. flag= "-" +field;
}else{
Th.classname= ' ASC ';
$scope. Flag=field;
}
}
});
</script>
</body>
------------------------------------
The advanced version is as follows
<body>
<div ng-app= "myApp" ng-controller= "Myctrl" >
<p><input type= "text" ng-model= ' keyword ' ></p>
<table border= "1" cellspacing= "0" cellpadding= "5" width= ">"
<tr>
<th ng-click= "Sort ($event)" > Serial number </th>
<th ng-click= "Sort ($event)" > Song name </th>
<th ng-click= "Sort ($event)" > Singers </th>
<th> Avatar </th>
<th> Sex </th>
</tr>
<tr ng-repeat= "N in Names|filter:{name:keyword,singer:keyword}" align= "center" >
<td>{{n.no}}</td>
<td>{{n.name}}</td>
<td>{{n.singer | shenglue}}</td>
<TD ng-bind-html= "N.face | IMG "></td>
<TD ng-bind-html= "N.sex | Sex "></td>
</tr>
</table>
<p> Name: {{MESG | reverse}}</p>
</div>
<script>
var app=angular.module (' myApp ', []);
App.controller ("Myctrl", function ($scope) {
$scope. names=[
{no:1,name: "In the World", singer: ' King Building, Face: ' images/true.jpg ', Sex: ' Man '},
{no:2,name: "Non-Emirates", Singer: ' Silming ', Face: ' images/true1.jpg ', Sex: ' Female '},
{no:3,name: "Wonderwall", Singer: ' Oasis ', Face: ' images/true2.jpg ', Sex: ' Man '},
{no:4,name: "We are Different", singer: ' Big Strong ', face: ' images/true.jpg ', Sex: ' Man '},
{no:5,name: "Fairy Tale Town", singer: ' Chen son ', face: ' images/true1.jpg ', Sex: ' Female '},
{no:6,name: "Riding the Wind of Time", singer: ' Wan si 妤 ', face: ' images/true.jpg ', Sex: ' Female '},
{no:7,name: "Supersonic", Singer: ' Oasis ', Face: ' images/true2.jpg ', Sex: ' Man '},
{no:8,name: "London Loves", singer: ' Blur ', Face: ' images/true.jpg ', Sex: ' Man '},
];
$scope. mesg= "Shanghai tap water from the sea! ";
});
App.service (' Yinsi ', function () {//Create service
This.star=function (str) {
Return Str.substr (0,1) + "* *";
}
});
App.filter (' Shenglue ', [' Yinsi ', function (Yinsi) {
return function (text) {
return Yinsi.star (text);
}
}]);
App.filter ("Reverse", function () {
return function (text) {
Return Text.split (""). Reverse (). Join ("");
}
});
App.filter (' img ', [' $sce ', function ($SCE) {
return function (text) {
Return $SCE. trustashtml (' ');
}
}]);
App.filter (' Sex ', [' $sce ', function ($SCE) {
return function (text) {
var str= ' <select>\
<option value= "male" + (text== "male"? ") Selected ":") + ' > male </option>\
<option value= "female" + (text== "female"?) Selected ":") + ' > female </option>\
</select> ';
Return $SCE. trustashtml (str);
}
}]);
</script>
</body>
Angularjs to achieve sorting effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
