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 ...
随机推荐
- 手游包压缩技术引领手游行业实现app页游化
近些年,掌上游戏时代已经成为全民风尚,但身为游戏开发商考虑过手游安装包大小与用户转化率之间的关系吗? 随着手机游戏市场发展愈发壮大,行业发展愈加成熟,手游厂商愈来愈多,手游产业也进入了优胜劣汰的环节, ...
- Go学习笔记一:解析toml配置文件
本文系作者原创,转载请注明出处https://www.cnblogs.com/sonofelice/p/9085291.html . 一些mysql或者日志路径的信息需要放在配置文件中.那么本博文主要 ...
- 如何让thrift0.9.2 在macos上面编译通过?
为将来跨语言通信预研,选择了thrift来试试.结果在mac os上面安装遇到种种困难,不知道是我选择方法错误还是咋的,不管怎样,总算是编译过去了. 首先,我们来参考官网的安装步骤:https://t ...
- python常见模块之os模块
os模块是python系统与操作系统交互的一个接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前 ...
- HTTP和HTTPS的请求和响应
HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法.HTTPS(Hypertext Transfer Protocol ove ...
- Flask-Session SQLAlchemy Script Migrate wtforms
Flask-session Flask-session跟框架自带的session有什么区别呢~ 框架自带的session是通过请求上下文~放入到Local中的~那如果我们想把session放入别的地方 ...
- 七、Mosquito 集群搭建
本章主要讲述Mosquitto 集群搭建的两种方式 1.进行双服务器搭建 2.进行多服务器搭建 一.Mosquitto的分布式集群部署 如果需要做并发量很大的时候就需要考虑做集群处理,但是我在查找资料 ...
- 5、RabbitMQ - Exchange之 fanout \ 【direct 关键字发送】 \ topic
pytho系列之 RabbitMQ - Exchange几种模式 RabbitMQ中,所有生产者提交的消息都由Exchange来接受,然后Exchange按照特定的策略转发到Queue进行存储 Rab ...
- java初学一
1.区分大小写 public static void main String args[] 是类体中的一个方法,之后的两个大括号以及之间的内容叫做方法体,一个java应用程序中必须有一个类且只有一个 ...
- ruby中的顶层方法
在ruby中写顶层函数的时候,总会有一个问题,self是谁,这些方法是谁的,是什么方法. 如下: p self p self.class def talk p self end talk 输出main ...