Angular排序的示例分析

發(fā)布時間：2021-07-15 13:54:55 來源：億速云閱讀：141 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“Angular排序的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular排序的示例分析”這篇文章吧。

angular的排序

<!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"> <!-- 這也是表單也有數(shù)據(jù)，她可以獲取value值，這幾個值代表你循環(huán)進(jìn)來的每項key名 -->
     <option value="num">按編號排序</option>
     <option value="name">按姓名排序</option>
     <option value="age">按年齡排序</option>
    </select>
    <select ng-model="b"> <!-- 也同樣獲取value值，當(dāng)為負(fù)的時候，是倒序，正序 -->
     <option value="">升序</option>
     <option value="-">降序</option>
    </select>
    <input type="text" ng-model="s"/>
   </nav>
   <table border="0px" id="table">
    <tr>
     <th>編號</th>
     <th>姓名</th>
     <th>年齡</th>
    </tr>
    <tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 過濾器過濾以下數(shù)據(jù) b+a這樣就字符串拼接到了一起。這樣數(shù)據(jù)改變就進(jìn)行了排序 -->
     <td>{{value.num}}</td>
     <td>{{value.name}}</td>
     <td>{{value.age}}</td>
    </tr>
   </table>
  </div>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   var app=angular.module("mk",[]);
   app.controller("text",function($scope,$http){
    $http.get("paixu.json").success(function(data){
     $scope.data=data.xinxi
     $scope.a="num";
    })
   });
  </script>
 </body>
</html>

以上是“Angular排序的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

Angular排序的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽