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排序实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
JavaScript实现世界各地时间显示
Sep 07 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
You might like
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
jQuery参数列表集合
2011/04/06 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
python实现连接mongodb的方法
2015/05/08 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python快速排序算法实例分析
2017/11/29 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
python根据多个文件名批量查找文件
2019/08/13 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2014年班主任工作总结
2014/11/08 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript