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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
8 个有用的JS技巧(推荐)
Jul 03 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
微信小程序实现锚点跳转
Nov 23 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
win7安装php框架Yii的方法
2016/01/25 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
详解python中的模块及包导入
2019/08/30 Python
python清空命令行方式
2020/01/13 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
怎么快速自学python
2020/06/22 Python
django form和field具体方法和属性说明
2020/07/09 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
学习方法演讲稿
2014/05/10 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
乐山大佛导游词
2015/02/02 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL