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 ...
随机推荐
- zzuli1783: 简单的求和---求因子和
1783: 简单的求和 Description 定义f(i)代表i的所有因子和(包括1和i),给定一个l,r.求f(l)+f(l+1)+...+f(r). Input 第一行输入一个t(t<10 ...
- 兼容获取scrollTop和scrollLeft(被滚动条卷走的部分)
function scroll() { //ie9+ 标准浏览器 if (window.pageYOffset != null) { return { left: window.pageXOffset ...
- windows系统的对象管理
windows中的对象和高级编程语言中所说的对象还欧区别,准确来讲,windows中的对象其实指的是一种数据结构并且是一种带着“对象头(object head)” 的数据结构! 所以windows中 ...
- MySQL优化(二):SQL优化
一.SQL优化 1.优化SQL一般步骤 1.1 查看SQL执行频率 SHOW STATUS LIKE 'Com_%'; Com_select:执行SELECT操作的次数,一次查询累加1.其他类似 以下 ...
- CentOS yum 安装node.js
第一步: curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash - 第二步: sudo yum -y i ...
- jQuery动态效果学习笔记
资料来源 W3Cschool 1.元素的显示与隐藏 1.1显示元素show() 语法 $(selector).show(speed,callback); 显示已经设置隐藏的元素 1.2隐藏元素hide ...
- Git在Githib和Github上的使用
本文使用的环境是linux里 一.git的常用命令解释: 1.基础命令: git init #创建版本库 git add <file> #将文件修改添加到暂存区 git commit -m ...
- Word 中将正文中的参考文件标号链接到参考文献具体条目
一.概论 在论文撰写过程中,不可避免地引用到参考文献.通常,论文格式要求我们在引用的正文后,使用中括号将参考文献章节中对应的出处条目序号引起来,例如: 有时,我们要建立起这两者之间的链接关系. 二.设 ...
- [转]linux内核分析笔记----内存管理
转自:http://blog.csdn.net/Baiduluckyboy/article/details/9667933 内存管理,不用多说,言简意赅.在内核里分配内存还真不是件容易的事情,根本上是 ...
- centos上传下载文件
1.在windows上安装SecureCRT 2.在centos上安装rzsz软件:yum install lrzsz 3.rz命令上传文件到centos 4.sz命令发送文件到windows