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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jquery获取radio值实例
Oct 16 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
详解用node编写自己的cli工具
May 23 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php把session写入数据库示例
2014/02/26 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
vue组件与复用详解
2018/04/08 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python机器学习之神经网络(三)
2017/12/20 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
广告设计应届生求职信
2014/03/01 职场文书
房租涨价通知
2015/04/23 职场文书
农业项目合作意向书
2015/05/08 职场文书
2015年行政人事工作总结
2015/05/21 职场文书