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系列(15) 函数(Functions)
Apr 12 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
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系统中使用PHP 5.3之后的库
2015/12/02 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
如何快速上手Vuex
2017/02/14 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
C++的几个面试题附答案
2016/08/03 面试题
空指针到底是什么
2012/08/07 面试题
电子商务应届生求职信
2013/11/16 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
公证书标准格式
2014/04/10 职场文书
实习协议书范本
2014/04/22 职场文书
土地租赁意向书
2014/07/30 职场文书
七年级作文之秋游
2019/10/21 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
JavaScript 定时器详情
2021/11/11 Javascript
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python