深究AngularJS——排序

忘是亡心i 2022-07-24 05:07 184阅读 0赞

先看看代码吧：  
//按时间排序

<html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="itemList in lists | orderBy :'time':true track by $index "> <span>{ { itemList.time}}</span>------ <span ng-repeat="item in itemList.data track by $index">{ {$index==0?item+'%':item}}-</span> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.lists = [{ "time":"2016-04-11","data":["29.07","50439","50439","1170","22544","21245","912"]},{ "time":"2016-04-12","data":["55.15","87668","74705","2222","38019","35530","1671"]},{ "time":"2016-04-13","data":["31.73","50720","44320","1175","23042","21743","893"]}] }); </script> </body> </html>

结果：

2016-04-13------ 31.73%-50720-44320-1175-23042-21743-893-
    2016-04-12------ 55.15%-87668-74705-2222-38019-35530-1671-
    2016-04-11------ 29.07%-50439-50439-1170-22544-21245-912-

本来正常排序按照angularJS的文档讲解那样加个过滤器就行，但这里为什么加了`track by $index`，这是因为angularjs里不允许遍历里的数组里有相同的结果。如果不加，则结果里的第三条数据因为50439是相同的，则不会显示了。不加效果如下：

2016-04-13------ 31.73%-50720-44320-1175-23042-21743-893-
    2016-04-12------ 29%-87668-74705-2222-38019-35530-1671-
    2016-04-11------

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关深究AngularJS——ui-router详解

1.配置使用ui-router 1.1导入js文件需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-

素颜马尾好姑娘i/ 2022年09月26日 11:59/ 0 赞/ 173 阅读

相关深究AngularJS——ng-drag、ng-drop

1.相关地址：插件下载：[https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.j

╰半夏微凉°/ 2022年09月21日 05:38/ 0 赞/ 155 阅读

相关深究AngularJS——过滤器（filter）

写这个的目的是希望能学会如何在指令里加入自己的过滤器。 1.关于过滤器你需要了解这些 1.过滤器的作用：是将我们的现有的数据进行处理，比如重排序、转换大小写、计

约定不等于承诺〃/ 2022年07月24日 05:19/ 0 赞/ 216 阅读

相关深究AngularJS——排序

先看看代码吧： //按时间排序 <html> <head> <meta charset="utf-8"> <script src="http://apps.bdi

忘是亡心i/ 2022年07月24日 05:07/ 0 赞/ 185 阅读

相关深究AngularJS——$sce的使用

为什么要要`$sce`？因为angularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过`$sce`告诉angualrJ

朱雀/ 2022年07月24日 04:29/ 0 赞/ 156 阅读

相关深究AngularJS——校验（非form表单）

为什么是非form表单？因为基本上都是通$http服务异步发送与接收数据，没有form表单个一样可以。更何况，form表单的提交校验在哪里都可以搜索得到，我这个是通过自己总结出

浅浅的花香味﹌/ 2022年07月24日 04:28/ 0 赞/ 212 阅读

相关深究AngularJS——下拉框（selected）

即使写一个下拉框，也会有多种情况，我这里讲讲我遇到过的。 1. 将值写死的情况： <body> <div ng-app="myApp" ng-contr

ゞ浴缸里的玫瑰/ 2022年07月24日 04:21/ 0 赞/ 230 阅读

相关深究AngularJS——监听模型$watch

前言 1.`$watch`是scope内置的函数，它的作用是用来监听数据的变化。 2.`$watch`可监听哪些数据？单个对象的属性需要计算的结果（函数）

Myth丶恋晨/ 2022年07月24日 04:02/ 0 赞/ 220 阅读

相关深究AngularJS——AngularJS中的Controller(控制器)

先看个示例 <div ng-app="myApp" ng-controller="myCtrl"> <!-- 在该控制器内保存着如下两个Model里的数据 ng-

太过爱你忘了你带给我的痛/ 2022年07月12日 06:51/ 0 赞/ 283 阅读

相关深究AngularJS——监听模型$watch

一.前言　　1.$watch是scope内置的函数，它的作用是用来监听数据的变化。　　2.$watch可监听哪些数据？　　单个对象的属性　　需要计算的结果

冷不防/ 2022年04月06日 10:54/ 0 赞/ 258 阅读