angularJs利用$scope处理升降序的方法


Posted in Javascript onOctober 08, 2018

如下所示:

<div ng-app="module" ng-controller="ctrl">
 <table border="1" width="600">
  <tr>
   <td ng-click="orderBy('id')">编号
    <span ng-if="status.id">升序</span>
    <span ng-if="!status.id">降序</span>
   </td>
   <td ng-click="orderBy('click')">点击数
    <span ng-if="status.click">升序</span>
    <span ng-if="!status.click">降序</span>
   </td>
   <td ng-click="orderBy('title')">标题
    <span ng-if="status.title">升序</span>
    <span ng-if="!status.title">降序</span>
   </td>
  </tr>
  <tr ng-repeat="(k,v) in data">
   <td>{{v.id}}</td>
   <td>{{v.click}}</td>
   <td>{{v.title}}</td>
  </tr>
 </table>
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {
  $scope.data = [
   {id: 1, click: 100, title: '百度'},
   {id: 2, click: 200, title: '谷歌'},
   {id: 3, click: 300, title: '腾讯'},
  ];
  //记录排序的状态
  $scope.status = {id: false, click: false, title: false};
  $scope.orderBy = function (field) {
   /*切换升序和降序*/
   $scope.status[field]=!$scope.status[field];
   $scope.data = $filter('orderBy')($scope.data, field, $scope.status[field]);
  }
 }]);
</script>

效果图:

angularJs利用$scope处理升降序的方法

以上这篇angularJs利用$scope处理升降序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 #Javascript
vue页面切换过渡transition效果
Oct 08 #Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 #Javascript
angular中子控制器向父控制器传值的实例
Oct 08 #Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 #Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 #Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python 爬虫的工具列表大全
2016/01/31 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python发送邮件实例分享
2017/07/28 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
公司保密承诺书
2014/03/27 职场文书
应急管理培训方案
2014/06/12 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
融资合作协议书范本
2014/10/17 职场文书
成都人事代理协议书
2014/10/25 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python