angular js实现开关效果
功能:实现点击排序,再点击排倒序。
实现方法如下
方法一:定义变量实现点击切换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实现开关效果的更多相关文章
- angular 实现modal windows效果(即模态窗口,半透明的遮罩层),以及bootstrap(css,components,js)的初步学习
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- (翻译)Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- 学习angular.js的一些笔记想法(上)
1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
随机推荐
- 如何使文本溢出边界不换行强制在一行内显示?#test{width:150px;white-space:nowrap;}
#test{width:150px;white-space:nowrap;}
- 为什么说”人生苦短,我用python“?
本文不扯什么大道理,只是先介绍Python的背景,然后从实用的角度出发举一两个真实栗子. 首先要想了解要一门语言的好坏,或者为什么招程序员喜欢(卧槽,原来程序员喜欢不是女朋友?)我们的先从语言的产 ...
- centos 配置yum源
1.yum配置 yum的配置文件在 /etc/yum.conf [root@mini ~]# cat /etc/yum.conf [main] cachedir=/var/cache/yum/$ba ...
- sap 动态字段的使用
1.sap中的动态字段其实类似c#里面的指针,都是指向的地址. 只是写法不同,sap 中的field-symbols就是类似指针. , b TYPE i. FIELD-SYMBOLS <fs&g ...
- send/receive h264/aac file/data by rtp/rtsp over udp/tcp
一.安装一些必要的调试工具 1.vlc安装sudo apt-get install vlcsudo apt-get install vlc-nox 2.ffmpeg安装,带ffplay,ffplay依 ...
- cookie和session的自我介绍
Cookie是什么? cookie说的直白点就是保存在用户浏览器端的一个键值对,举个例子,你现在登录了京东商城,你把浏览器关闭之后,你再打开京东,你还是可以对你的账户继续操作,已经购买的商品,订单都是 ...
- Shiro起步
1.测试环境 IntelliJ Idea 2.pom配置 <?xml version="1.0" encoding="UTF-8"?> <p ...
- Oracle 性能调优 SQL_TRACE
思维导图 Oracle优化10-SQL_TRACE解读 Oracle优化11-10046事件 概述 当我们想了解一条SQL或者是PL/SQL包的运行情况时,特别是当他们的性能非常差时,比如有的时候看起 ...
- cdoj1638 红藕香残玉簟秋,轻解罗裳,独上兰舟。
地址:http://acm.uestc.edu.cn/#/problem/show/1638 题目: 红藕香残玉簟秋,轻解罗裳,独上兰舟. Time Limit: 4000/2000MS (Java/ ...
- spark[源码]-任务调度源码分析[三]
前言 在上一篇文章中,我主要是讲解了DAG阶段的处理,spark是如何将一个job根据宽窄依赖划分出多个stage的,在最后一步中是将生成的TaskSet提交给了TaskSchedulerInmpl的 ...