功能:实现点击排序,再点击排倒序。

实现方法如下

方法一:定义变量实现点击切换true或false,代码为:

         $scope.lidata = [
                {"name":"Terry","age":12},
                {"name":"Jenifer","age":45},
                {"name":"Garry","age":36},
                {"name":"Tao","age":24},
                {"name":"Lee","age":34},
         ];
     $scope.sortTmp = false;
   $scope.sortFn = function(arg){
  $scope.sortTmp = !$scope.sortTmp; //在这实现点击的切换
  $scope.lidata = $filter('orderBy')($scope.lidata, arg, $scope.sortTmp);
}

其中对应的html代码为:

        <table style="margin-left:20px">
<tr>
<th ng-click = "sortFn('name')">姓名</th>
<th ng-click = "sortFn('age')">年龄</th>
</tr>
<tr ng-repeat = "data in lidata">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</table>

方法二:函数也是对象,可以赋属性。

        $scope.sortFn = function(arg){
arguments.callee["sortFn" + arg] = !arguments.callee["sortFn" + arg]
$scope.lidata = $filter('orderBy')($scope.lidata,arg,arguments.callee["sortFn" + arg]);
}

html代码同上。

angular js实现开关效果的更多相关文章

  1. angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习

    废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. (翻译)Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  5. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  6. Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  7. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  8. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  9. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

随机推荐

  1. 雨痕 的《Python学习笔记》--附脑图(转)

    原文:http://www.pythoner.com/148.html 近日,在某微博上看到有人推荐了 雨痕 的<Python学习笔记>,从github上下载下来看了下,确实很不错. 注意 ...

  2. windows系统的对象管理

    windows中的对象和高级编程语言中所说的对象还欧区别,准确来讲,windows中的对象其实指的是一种数据结构并且是一种带着“对象头(object head)” 的数据结构!  所以windows中 ...

  3. shell_02

    if判断: if [$? -eq 0];then echo "xxxxxxxxxxx" else echo "xxxxxxxxxxxxx" fi case判断: ...

  4. java7(2)——使用mutilcatch注意事项

    从java7推出mutilcatch后,到现在都少有看到人使用,可能是这个功能真正用起来,比起多个catch并不快多少,而且现在的工IDE具太厉害了,什么都有快捷键!说是这么说,我们还是得了解一下如何 ...

  5. python的曲线平滑工具,及python画一条线中包含不同粗细不同颜色的画线方法

    from scipy.signal import savgol_filter import matplotlib.pyplot as plt cc = savgol_filter(c, 99, 1) ...

  6. Hadoop2.7.3+spark2.1.0+hbase0.98分布式集群部署

    运行环境配置(10.79.115.111-114) 1.关闭防火墙与selinux 关闭防火墙: CentOS 7.x默认使用的是firewall作为防火墙. systemctl stop firew ...

  7. Linux系统——最小化安装

    一.虚拟机进行Linux minimal 安装 网络连接:选择“自定义”——>VMnet8(NAT模式) #PC与NAT网络的虚拟机在不同网段,此时虚拟网卡作为网关建立通信 NAT模式可直接上I ...

  8. SQL Server创建视图——视图的作用

    视图简介: 视图可以看作定义在SQL Server上的虚拟表.视图正如其名字的含义一样,是另一种查看数据的入口. 常规视图本身并不存储实际的数据,而仅仅是由SELECT语句组成的查询定义的虚拟表 . ...

  9. [C语言]删除用户自定义后缀名的所有文件

    环境:win7 IDE:DEV-C++ 编译器:GCC 编译结果:Success 运行结果:Success 使用说明: 1.输入需要查询的目录,比如e: 2.输入需要删除的后缀名:比如:txt 注意: ...

  10. 软工网络15团队作业1——团队组队&展示

    一.团队展示 1.队名:想不出队名 2.队员学号(标记组长) 201521123064 郭炜埕 201521123066 郑晓丽 201521123067 廖怡洁 201521123068 包梦榕 2 ...