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"> <!-- 这也是表单也有数据，她可以获取value值，这几个值代表你循环进来的每项key名 -->
     <option value="num">按编号排序</option>
     <option value="name">按姓名排序</option>
     <option value="age">按年龄排序</option>
    </select>
    <select ng-model="b"> <!-- 也同样获取value值，当为负的时候，是倒序，正序 -->
     <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"> <!-- 过滤器过滤以下数据 b+a这样就字符串拼接到了一起。这样数据改变就进行了排序 -->
     <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排序实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# angular排序 # AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息) # Angularjs添加排序查询功能的实例代码 # mongoDB 多重数组查询(AngularJS绑定显示 nodejs) # Angularjs分页查询的实现 # AngularJS 过滤与排序详解及实例代码 # AngularJS ng-table插件设置排序 # angular-ui-sortable实现可拖拽排序列表 # 妙用Angularjs实现表格按指定列排序 # angular过滤器实现排序功能 # AngularJS轻松实现双击排序的功能 # Angularjs使用过滤器完成排序功能 # Angular实现的自定义模糊查询、排序及三角箭头标注功能示例 # 小编 # 升序 # 也有 # 在此 # 给大家 # 这几个 # 表单 # 所述 # 给我留言 # 感谢大家 # 进行了 # 说点 # 每项 # 当为 # 疑问请 # 有任何 # 这也是 # 按年 # 降序 # text

返回目录在线咨询

上一篇：.NET中的Task和Thread有什么区别？如何选择正确的并发模型？
下一篇：电商网站SEO优化技巧全解析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Angular排序实例详解

您的项目需求