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代码同上。

转载于:https://www.cnblogs.com/lovemomo/p/6690119.html

angular js实现开关效果相关推荐

angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习...
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
用html和js制作一个控制灯泡开关效果
用html和js制作一个控制灯泡开关效果 **用css样式来控制div图片和文本的位置,然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果** 1.以下是运行的效果图 2. ...
angular.js 嵌套路由
介绍 AngularJS 嵌套路由:,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可 ...
angular js一factory，service，provider创建服务
服务:在AngularJS 中,服务是一个函数或对象在写控制器的时候,不要复用controller,当我们的controller里面有相同的代码时,此时需要把它抽取成一个服务,所有的服务都符合依赖注 ...
Angular.js为什么如此火呢？
AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM ...
angular.js的路由和模板在asp.net mvc 中的使用
首先创建asp.NET mvc 程序,创建一个web api : 1 public class UserController : ApiController 2 { 3 private static ...
通过Web Api 和 Angular.js 构建单页面的web 程序
在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端, ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

angular js实现开关效果

angular js实现开关效果相关推荐

最新文章

热门文章