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

实现方法如下

方法一:定义变量实现点击切换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. 【chainer框架】【pytorch框架】

    教程: https://bennix.github.io/ https://bennix.github.io/blog/2017/12/14/chain_basic/ https://bennix.g ...

  2. AntiSamy测试

    AntiSamy为owasp针对xss提供的处理库,可以配置xml策略来决定过滤的内容,比如标签.属性.css等,自定义策略给开发人员使用成本比较高,AntiSamy也提供了几个内置的策略,其安全级别 ...

  3. flask请求和应用上下文

    关于WSGI WSGI(全称Web Server Gateway Interface),是为 Python 语言定义的Web服务器和Web应用程序之间的一种简单而通用的接口,它封装了接受HTTP请求. ...

  4. (2.6)Mysql之SQL基础——存储引擎的查看与修改

    (2.6)Mysql之SQL基础——存储引擎的查看与修改 可以使用 show engines; 查看数据库支持的所有的存储引擎: 目录: 1.数据库级别存储引擎 1.1查看现在默认的存储引擎 1.2 ...

  5. django URL的补充 默认值 传多个参数

    url 后面还可以加上默认值 默认值 url(r'^index/', views.index, {'name': 'root'}), urls.py url对应关系 from django.conf. ...

  6. 前端 javascript 数据类型 字典

    定义字典 a = {"k1":"v1","k2":"v2",}; Object {k1: "v1", ...

  7. vim符号列表

    Exuberant Ctags工具安装 • 软件简介 Ctags generates an index (or tag) file of language objects found in sourc ...

  8. java static成员变量方法和非static成员变量方法的区别 ( 二 )

    原创文章,未经作者允许,禁止转载!!! 静态成员变量不用new对象,在类加载的过程中就已经初始化存放在数据区域,静态成员变量是类和所有对象共有的,类和对象都可以改变它的值,每一次改变值之后,静态成员变 ...

  9. Python(线程进程3)

    四 协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切 ...

  10. fork和multiprocessing

    多任务理解 单核cpu完成多个cpu的切换 时间片轮转 优先级调度 并发看上去一起执行 并行一起执行 调度算法 什么样的情况下用什么样的规则让谁去执行. 一般情况下电脑都是并发的 进程的创建-fork ...