SoFunction
Updated on 2025-04-10

Detailed explanation of Angular sorting example

Tell me some small cases angular sorting

<!DOCTYPE html>
<html ng-app="mk">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   nav{
    text-align: center;
   }
   nav>*{
    vertical-align: top;
   }
   table{
    width: 100%;
    text-align: center;
   }
   table th,td{
    background: #A9A9A9;
    line-height: 30px;
   }
  </style>
 </head>
 <body>
  <div ng-controller="text">
   <nav>
    <select ng-model="a"> <!-- This is also the form and there is data,She can get itvaluevalue,这几个value代表你循环进来的每项keyname -->
     <option value="num">Sort by number</option>
     <option value="name">按姓name排序</option>
     <option value="age">Sort by age</option>
    </select>
    <select ng-model="b"> <!-- Also obtainedvaluevalue,When negative,It's reverse order,Formal order -->
     <option value="">Ascending order</option>
     <option value="-">descending order</option>
    </select>
    <input type="text" ng-model="s"/>
   </nav>
   <table border="0px" >
    <tr>
     <th>serial number</th>
     <th>姓name</th>
     <th>age</th>
    </tr>
    <tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- Filter filters the following data b+aThis way the strings are spliced ​​together。This way the data changes and sort -->
     <td>{{}}</td>
     <td>{{}}</td>
     <td>{{}}</td>
    </tr>
   </table>
  </div>
  <script src="js/" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   var app=("mk",[]);
   ("text",function($scope,$http){
    $("").success(function(data){
     $=
     $="num";
    })
   });
  </script>
 </body>
</html>

The above is a detailed explanation of the Angular sorting example introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!