ionic项目之排序问题

1,一开始用js原生的排序方法,有个错误(超过十条数据后就会排序混乱,可能是在angularjs中使用js原生方法的bug)

var results = results.sort(function(a, b){
               switch ( sortKey ) {
                  case "date":
                    return a.id < b.id;
                  case "donedate":
                    return a.donedate > b.donedate;
                  case "title":
                    return a.title > b.title;
                  case "importance":
                    return parseInt(b.importance) - parseInt(a.importance);
                  default: 

                    return a.id < b.id;
               }
            });

2,其实angularjs有自己的排序方法(orderBy)

http://docs.angularjs.cn/api/ng/filter/orderBy

Usage

In HTML Template Binding

{{ orderBy_expression | orderBy : expression : reverse}}

In JavaScript

$filter(‘orderBy‘)(array, expression, reverse)

orderBy_expression:要排序的数据

expression:排序类型

reverse:升序或降序(true或false)

js代码

$scope.sort = function() {
		nonePopover();
		$ionicActionSheet.show({
			buttons: [{
				text: '按<b>发布日期</b>排序'
			}, {
				text: '按<b>完成日期</b>排序'
			},  {
				text: '按<b>标题</b>排序'
			},{
				text: '按<b>重要度</b>排序'
			}],
			titleText: '选择排序方法',
			cancelText: '关闭',
			cancel: function() {
				return true;
			},
			buttonClicked: function(index) {
				var sortKey = "";

				switch (index) {
					case 0:
						$scope.expression = "id";
						$scope.reverse = true;
						break;
					case 1:
						$scope.expression = "donedate";
						$scope.reverse = false;
						break;
					case 2:
						$scope.expression = "title";
						$scope.reverse = true;
						break;
					case 3:
						$scope.expression = "importance";
						$scope.reverse = true;
						break;
					default:
						$scope.expression = "id";
						$scope.reverse = true;
				}
				TodoListService.findByGroupId($stateParams.groupId, sortKey).then(function(todolists) {
					$scope.todolists = todolists; // 未完成
				});
				return true;
			}
		});
	}

html代码

<div class="item item-checkbox"
        ng-repeat="todo in todolists  | orderBy : expression : reverse " 

        ng-click="show({{todo.id}})"
        ng-show="todolists.length">

时间: 2024-07-30 13:52:17

ionic项目之排序问题的相关文章

ionic start 创建ionic项目报错,及解决过程

问题描述: 前一次创建利用命令行创建ionic项目一次性成功,第二次没有运行: $ npm install -g ionic cordova 直接运行: ionic start ionicDemo 出现上图错误: × Running command - failed!Exception: npm ERR! path C:\work\ionicdemo\node_modules\fsevents\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048

[转]ionic项目之上传下载数据

本文转自:http://blog.csdn.net/superjunjin/article/details/44158567 一,首先是上传数据 记得在angularjs的controller中注入$http依赖 [javascript] view plaincopyprint? var data = {id: $scope.task_id, groupId: $scope.task_groupid, importance: $scope.priority_level, classname:$s

浅谈对ionic项目的理解

在思考怎么将客户端app连接到服务器的时候,就在想ionic项目的本质是什么,一开始因为ionic serve这一命令,我以为它自己就是个服务器,但是后来一细想又感觉不是这样,不然客户端又该怎么和服务端进行交互呢?而ionic本质正好验证了我的猜想. 通过ionic info我们可以发现ionic项目所需环境如下: Your system information: ordova CLI: 6.4.0 Ionic CLI Version: 2.1.17 Ionic App Lib Version:

ionic项目中实现发短信和打电话

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic-sms-and-call/ 最近做的一个ionic项目中需要实现发短信和打电话,总结了一下遇到的问题和实现的方法. 1.关于打电话 在html中可以很方便的实现拨打电话先在config.xml中添加: <access origin="tel:*" launch-external="yes"/> 然后在html中这样写:

ionic项目使用weinre调试移动端

怎样调试ionic开发的hybridApp web view 在一篇歪国人的博文中,偶然发现weinre这个词.然后就与他结下了不解之缘. weinre是什么 weinre是远程web调试器,可以调试web页面.如果你用过FF的FireBug和chrome的调试工具对它那会有熟悉的即视感.weinre也是Codova项目的一份子,所以用它来调试ionic开发的app最合适不过了. 如何安装weinre? 使用npm命令安装 1.这种方法需要你先安装好node,Windows的安装方法网上太多,自

ionic项目之图片的选择与上传

由于ionic框架是基于angularJS的,开发hybrid app混合应用的,但angularJS本身没有太多对移动设备硬件的支持,所以找到两种方法解决这个问题! 一,ngCordova插件:ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用移动设备的功能,即可以在AngularJs代码中访问设备的Api 二,html5plus:最近比较火的一个东西,也是为了解决有关html5移动app去调用移动

ionic项目之上传下载数据

一,首先是上传数据 记得在angularjs的controller中注入$http依赖 var data = {id: $scope.task_id, groupId: $scope.task_groupid, importance: $scope.priority_level, classname:$scope.classname, title: $scope.task_title, date: $scope.todo_date, detail: $scope.task_detail, ima

Ionic项目中使用极光推送-android

对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin 插件,也有相关的实现实例:GitHub地址 ,但是使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用(自己也没有试可不可以). 于是选择国内的消息推送服务,主要有:百度云推送,腾讯信鸽,极光推送,yunba 等等,其中只有极光推送官方提供了phonegap/cordov

ionic 项目引用 Background Mode 时,部署到ios设备时出现异常的解决方法

我们的ionic程序,有时候需要运行在后台,这个时候我们需要引用到cordova-plugin-background-mode,目前的版本0.7.2.  但是目前在IOS设备上调用这个版本的plugin是有问题的. 这个问题目前有以下2种解决方法. 1.  Visual Studio Code 打开ionic 项目, 打开终端, 运行命令: ionic cordova platform add ios ,  命令运行完成后, 用XCode打开位于 \platforms\ios\*.xcodepr