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

实现方法如下

方法一:定义变量实现点击切换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. apt-get 报 The following signatures were invalid: KEYEXPIRED 错误

    apt-get 原理: 参考:https://blog.csdn.net/a13526758473/article/details/79247478 apt对它所管理的每一个程序包都有一对公钥和私钥, ...

  2. Linux上安装MySQL及其基础配置

    本文主要介绍Linux下使用yum安装MySQL,以及启动.登录和远程访问MySQL数据库. 1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | gr ...

  3. Flask之flask-session

    简介 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session保存到多个地方,如: redis:保存数 ...

  4. Linux PHP7的openssl扩展安装

    Linux环境下使用PHPmailer发送邮件时,出现如下错误: SMTP -> ERROR: Failed to connect to server: Unable to find the s ...

  5. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  6. sidekiq-cron定时任务

    参考  时间格式 gem "sidekiq-cron", "~> 1.1" route.rb下添加 require 'sidekiq/cron/web', ...

  7. 接口API中的敏感数据基于AES进行安全加密后返回

    许久没有写博客了,有些惶恐地打开这个再熟悉不过的编辑器. 场景:要对一个涉及到敏感数据(账号.密码)的接口进行加密后返回 由于之前没有相关的经验,所以先在网上搜罗了一阵,这篇博客不错https://w ...

  8. CodeForces - 632E Thief in a Shop (FFT+记忆化搜索)

    题意:有N种物品,每种物品有价值\(a_i\),每种物品可选任意多个,求拿k件物品,可能损失的价值分别为多少. 分析:相当于求\((a_1+a_2+...+a_n)^k\)中,有哪些项的系数不为0.做 ...

  9. HDFS datanode心跳与运维中的实际案例

    分布式系统的节点之间常采用心跳来维护节点的健康状态,如yarn的rm与nm之间,hdfs的nn与dn之间.DataNode会定期(dfs.heartbeat.interval配置项配置,默认是3秒)向 ...

  10. 【android】通过leakCanary找出程序内存泄露点

    背景 内存泄露是咱新手比较头痛的问题,因为它不像崩溃,在开发环境可以根据提示的错误信息排查问题. 你都不知道咱的app是否哪个犄角旮旯藏着一个吞噬内存的黑洞. 排查android 内存泄露比较底层高端 ...