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

 更新时间:2018年10月08日 11:48:20   作者:泠泠在路上  
今天小编就为大家分享一篇angularJs利用$scope处理升降序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<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处理升降序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Angular Tree Shaking优化机制原理详解

    Angular Tree Shaking优化机制原理详解

    这篇文章主要为大家介绍了Angular Tree Shaking优化机制原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Angular的MVC和作用域

    Angular的MVC和作用域

    本文主要Angular的MVC和作用域进行详细分析介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • Angular6新特性之Angular Material

    Angular6新特性之Angular Material

    今天小编就为大家分享一篇关于Angular6新特性之Angular Material,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • 解决ng-repeat产生的ng-model中取不到值的问题

    解决ng-repeat产生的ng-model中取不到值的问题

    今天小编就为大家分享一篇解决ng-repeat产生的ng-model中取不到值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS基础 ng-cloak 指令简单示例

    AngularJS基础 ng-cloak 指令简单示例

    本文主要介绍AngularJS ng-cloak 指令,这里帮大家整理了ng-clock指令的基础资料,和简单的代码实例及效果图,学习AngularJS指令的朋友可以参考下
    2016-08-08
  • angularjs学习笔记之双向数据绑定

    angularjs学习笔记之双向数据绑定

    AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同,脏治检查允许AngularJS监视那些存在或者不存在的变量。
    2015-09-09
  • 使用Angular Cli如何创建Angular私有库详解

    使用Angular Cli如何创建Angular私有库详解

    这篇文章主要给大家介绍了关于使用Angular Cli如何创建Angular私有库的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • angular ngClick阻止冒泡使用默认行为的方法

    angular ngClick阻止冒泡使用默认行为的方法

    这篇文章主要介绍了angular ngClick阻止冒泡使用默认行为的方法,较为详细的分析了AngularJS中ngClick事件执行原理与阻止冒泡的实现技巧,需要的朋友可以参考下
    2016-11-11
  • 如何处理Angular 错误消息ERROR Error NullInjectorError No provider for XX

    如何处理Angular 错误消息ERROR Error NullInjectorError No provid

    这篇文章主要介绍了如何处理Angular 错误消息ERROR Error NullInjectorError No provider for XX
    2023-07-07
  • 用AngularJS来实现监察表单按钮的禁用效果

    用AngularJS来实现监察表单按钮的禁用效果

    本篇文章主要介绍了用AngularJS来实现监察表单按钮的禁用效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11

最新评论