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 ...
随机推荐
- css冲突2 要关闭的css在项目代码以外,但是是通过<link>标签引入的css(例如bootstrap):解决方法,在APP.css中使用全局样式
css冲突,导致html字体过小. 通过浏览器检查发现,导致字体过小的css来自bootstrap. 现要关闭bootstrap的css: 直接在APP.css中添加: html{ font-size ...
- python包管理一防丢失
pip3 freeze >list.txt 导出当前环境安装的所有包(list是当前项目录下的文件,可以自己命名)pip3 install -r list.txt 安装文件中所 ...
- HTML容易遗忘内容(一)
HTML基础语法: <html> <head> <tiltle>Hello</tiltle> </head> <body bgcolo ...
- 本书版权输出到台湾地区,《深入理解Android内核设计思想》诚挚感谢大家一直以来的支持!
- 009-mac下记事本工具 sublime text3
1.subline text3 下载:https://download.sublimetext.com/Sublime%20Text%20Build%203143.dmg 序列号:[来源与互联网,如有 ...
- 将 ssh (security shell) 移植到 vxworks
openssh 依赖 openssl,这两个东西主要针对posix系统,移植到 vxworks 等实时系统有相当的难度. 可以考虑移植如下的库(ssh server): dropbear: https ...
- sap 动态字段的使用
1.sap中的动态字段其实类似c#里面的指针,都是指向的地址. 只是写法不同,sap 中的field-symbols就是类似指针. , b TYPE i. FIELD-SYMBOLS <fs&g ...
- 脚本其实很简单-windows配置核查程序(2)
bat脚本是什么? 首先讲讲什么是命令行,在windows操作系统中,点击左下角的win图标,直接输入cmd搜索,左键点击进入命令行模式(或按键盘上的win键+r直接调出来命令行窗口). 在windo ...
- 最长上升子序列算法(n^2 及 nlogn) (LIS) POJ2533Longest Ordered Subsequence
问题描述: 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对于给定的一个序列(a1, a2, ..., aN),我们可以得到一些上升的子序列 ...
- Python 实例2—购物车
老男孩教学学习笔记 """启动程序后,让用户输入工资,然后打印商品列表允许用户根据商品编号购买商品用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒可随机退出,退出 ...