编程 Javascript

Angular排序实例详解

Posted in Javascript onJune 28, 2017

说点小案例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排序实例详解

- Author -

当年华褪去生涩

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js实时获取系统当前时间实例代码

Jun 28 Javascript

javascript随机将第一个dom中的图片添加到第二个div中示例

Oct 08 Javascript

JavaScript获取表单内所有元素值的方法

Apr 02 Javascript

jQuery实现网站添加高亮突出显示效果的方法

Jun 26 Javascript

基于javascript实现彩票随机数生成（升级版）

Apr 17 Javascript

实例详解ECMAScript5中新增的Array方法

Apr 05 Javascript

仿淘宝JSsearch搜索下拉深度用法

Jan 15 Javascript

Vue循环组件加validate多表单验证的实例

Sep 18 Javascript

微信小程序登录数据解密及状态维持实例详解

May 06 Javascript

layui点击数据表格添加或删除一行的例子

Sep 12 Javascript

如何通过vscode运行调试javascript代码

Jul 24 Javascript

react antd表格中渲染一张或多张图片的实例

Oct 28 Javascript

基于JS对象创建常用方式及原理分析

Jun 28 #Javascript

Node.js实现文件上传的示例

Jun 28 #Javascript

iscroll-probe实现下拉刷新和下拉加载效果

Jun 28 #Javascript

JavaScript 获取元素在父节点中的下标(推荐)

Jun 28 #Javascript

JS中把函数作为另一函数的参数传递方法(总结)

Jun 28 #Javascript

js+html制作简单日历的方法

Jun 27 #Javascript

ionic环境配置及问题详解

Jun 27 #Javascript