AngularJS 实现 双击排序

关键代码:html

 <th class="col-md-3"><a href="" ng-click="desc(‘2‘,la=!la)">单价</a></th>
 <th class="col-md-3"><a href="" ng-click="desc(‘3‘,la=!la)">销售金额</a></th>
 <th class="col-md-1"><a href="" ng-click="desc(‘4‘,la=!la)">销售数量</a></th>

其中 la=!la 是用来判断当前点击是true还是false

JS代码

//开始默认为totalnum字段 按照降序排列
$scope.foodsale =ret.sort(function ( x,y )
                {
                    return y.totalnum - x.totalnum;//这样表示 按照ret【表示接收返回数组】里面的totalnum字段 按照降序排列 反之 return x.totalnum - y.totalnum; 为升序
})

  

 $scope.desc= function (fla,bol) {
            if(fla=="4"){
                if(bol==false){

                    $scope.foodsale =$scope.foodsale.sort(function ( x,y )
                    {
                        return y.totalnum - x.totalnum;
                    })
                }else{
                    console.log("bbb")
                    $scope.foodsale =$scope.foodsale.sort(function ( x,y )
                    {
                        return x.totalnum - y.totalnum;
                    })
                }
            }else if(fla=="3"){//totalmoney
                if(bol==false){
                    $scope.foodsale =$scope.foodsale.sort(function ( x,y )
                    {
                        return y.totalmoney - x.totalmoney;
                    })
                }else{
                    $scope.foodsale =$scope.foodsale.sort(function ( x,y )
                        {
                            return x.totalmoney - y.totalmoney;
                        }
                    )
                }
            }else if(fla=="2"){//price
                if(bol==false){
                    $scope.foodsale =$scope.foodsale.sort(function ( x,y )
                    {
                        return y.price - x.price;
                    })
                }else{
                    $scope.foodsale =$scope.foodsale.sort(function ( x,y )
                        {
                            return x.price - y.price;
                        }
                    )
                }
            }

以上代码 便可实现 双击排序

时间: 2024-07-31 17:46:07

AngularJS 实现 双击排序的相关文章

AngularJS 过滤与排序详解及实例代码

这篇文章主要介绍了AngularJS 过滤与排序,实现查询过滤以及排序的功能. 通过这篇文章可以了解到 1. angularjs的过滤器 2. ng-repeat的使用方法 3. 控制器的使用 4. 数据的绑定 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query是查询过滤时输入的

关于angularjs的orderby排序

包子君又来了,,,angularjs有一个非常强大的功能,那就是排序啦,其实也是算filter的一部分呢,包子刚刚做了一个排序,是按照公司的部门的数字大小排列的 由于后台没传来标识,所以我前台自己截图部门的数字,将他重新放在一个数组里面,然后orderby这个数组就ok啦,最后上图: rsdesa是我截图的数组的顺序,desc代表顺序呢, 希望大家能够共同进步,一起成为一个优秀的前端工程师.嘻嘻~~~~

angularjs中的排序和过滤

页面效果: 说明:1.在输入框中输入姓名或年龄,可以对表格内的数据做过滤    2.点击姓名,可以对姓名字段做排序.排序方式可逆转. 3.点击年龄,可以对年龄字段做排序.排序方式可逆转. 代码实现: <script> angular.module('myApp',[]) .controller('Aaa',['$scope','$filter',function($scope,$filter){ var oriArr = [ { name : "red" , age : &

AngularJS过滤排序思路

本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name": "aa", "email": "aaemail", "birthdate": "2015-03-23T18:00:37-07:00", "phonenumber": "aaph

三大结构之选择----IF

现实世界中,根据面临的特定情形,不断调整我们应对的方式,是每一个智慧生命体具有的典型特征.在VB的世界里,也具有这样的特征:VB提供了一个结构,让我们告诉程序,当前条件下,需要采取这种办法,就VB的书写语法格式,是这样滴: If     条件   Then 语句块 End If 例子:  If a < b Then Print "a真小于b" End If 在上面的例子中,如果条件不成立,我们什么也不做,选择了忽略,如果我们不想忽略,也就是条件成立,我们采取A计划应对,如果不成立

使用angularjs对数据进行排序筛选

看下面的代码 scope.Person = [ {'id':1,'name':'小张','age':18}, {'id':2,'name':'Tom','age':19}, {'id':3,'name':'张三','age':19}, {'id':4,'name':'小明','age':17} ]; 这儿有一个对象数组,在angularjs控制器里写的,把它显示在页面上的时候可以对其进行排序和筛选. <table> <tr> <th>编号</th> <

基于AngularJS的过滤与排序

前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定 程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query

自己写的angularJs排序指令【原创】

首先,给大家看看指令完成的效果.(请注意区分下面几张图片中,对象值的变化) 在页面没点击之前: 在点击第一次之后: 再点击第二次之后: 好了,效果图已经看完了,如果大家有兴趣的话可以继续往下看,接下来要讲的是关于angularJs中filter内置好的order功能,如果熟悉这个功能的同学们可以跳过下面要讲的内容 orderBy这个功能其实是内置的过滤器,他可以在html和js代码中使用 html:{{ orderBy_expression | orderBy : expression : re

angularjs 实现排序功能

实现公式:{{orderBy_expression | orderBy:expression:reverse}} Example <script> var app=angular.module("myApp",[]);    app.controller("Ctrl",function($scope){        $scope.friends=[            {name:"John",phone:'555-1212',a