排列$ scope内的对象顺序

时间:2015-12-05 11:17:21

标签: javascript angularjs

我想知道是否可能更改范围内对象的顺序。我有$scope.movies现在该范围按ID排序。因此,当我在控制台登录$scope.movies时,它看起来像这样,

{"id":1,"title":"The Town","release_date":"2010-10-21","image":"/zX4fKmDXKGt4hlzhAJirdlRKFgO.jpg","user_id":null,"created_at":"2015-12-04T19:57:58.449Z","updated_at":"2015-12-04T19:57:58.449Z","movie_id":"23168","imdb_rating":"7.6"},
{"id":2,"title":"Interstellar","release_date":"2014-11-06","image":"/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg","user_id":null,"created_at":"2015-12-04T19:58:16.600Z","updated_at":"2015-12-04T19:58:16.600Z","movie_id":"157336","imdb_rating":"8.7"},
{"id":3,"title":"Django Unchained","release_date":"2013-01-16","image":"/5WJnxuw41sddupf8cwOxYftuvJG.jpg","user_id":null,"created_at":"2015-12-04T20:00:22.411Z","updated_at":"2015-12-04T20:00:22.411Z","movie_id":"68718","imdb_rating":"8.5"},
{"id":4,"title":"Moonrise Kingdom","release_date":"2012-05-30","image":"/uw88gWDC0W7AAEhMeQmtdXFV7yR.jpg","user_id":null,"created_at":"2015-12-04T20:00:41.054Z","updated_at":"2015-12-04T20:00:41.054Z","movie_id":"83666","imdb_rating":"7.8"},
{"id":5,"title":"Gone Girl","release_date":"2014-10-01","image":"/gdiLTof3rbPDAmPaCf4g6op46bj.jpg","user_id":null,"created_at":"2015-12-05T09:05:08.424Z","updated_at":"2015-12-05T09:05:08.424Z","movie_id":"210577","imdb_rating":"8.2"}

但我想按发布日期排列数据,所以它看起来像这样,

{"id":1,"title":"The Town","release_date":"2010-10-21","image":"/zX4fKmDXKGt4hlzhAJirdlRKFgO.jpg","user_id":null,"created_at":"2015-12-04T19:57:58.449Z","updated_at":"2015-12-04T19:57:58.449Z","movie_id":"23168","imdb_rating":"7.6"},
{"id":4,"title":"Moonrise Kingdom","release_date":"2012-05-30","image":"/uw88gWDC0W7AAEhMeQmtdXFV7yR.jpg","user_id":null,"created_at":"2015-12-04T20:00:41.054Z","updated_at":"2015-12-04T20:00:41.054Z","movie_id":"83666","imdb_rating":"7.8"},
{"id":3,"title":"Django Unchained","release_date":"2013-01-16","image":"/5WJnxuw41sddupf8cwOxYftuvJG.jpg","user_id":null,"created_at":"2015-12-04T20:00:22.411Z","updated_at":"2015-12-04T20:00:22.411Z","movie_id":"68718","imdb_rating":"8.5"},
{"id":5,"title":"Gone Girl","release_date":"2014-10-01","image":"/gdiLTof3rbPDAmPaCf4g6op46bj.jpg","user_id":null,"created_at":"2015-12-05T09:05:08.424Z","updated_at":"2015-12-05T09:05:08.424Z","movie_id":"210577","imdb_rating":"8.2"}
{"id":2,"title":"Interstellar","release_date":"2014-11-06","image":"/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg","user_id":null,"created_at":"2015-12-04T19:58:16.600Z","updated_at":"2015-12-04T19:58:16.600Z","movie_id":"157336","imdb_rating":"8.7"},

那么可以使用javascript更改$ scope内对象的顺序吗?

我在ng-repeat中使用orderBy release_date。但对于我的html结构,我不得不将电影放入行中。使用这个,

$scope.toRows = function(arr, total){
  var i = 0, rows = [];
  while(i < arr.length){
    i % total == 0 && rows.push([]);
    rows[rows.length-1].push(arr[i++])
  }
  return rows
};
$scope.moviesRows = $scope.toRows($scope.movies, 6);

然后orderBy不再正常工作,因为它将$scope.movies的第一项放在行中,然后对行中的对象执行orderBy。因此,它首先按行中的ID顺序放置所有对象,然后按release_date对行中的对象进行排序。

*编辑*

它表明JSON输出的顺序与Angular放置对象的方式无关。

array.sort(function(a,b){
  return new Date(b.release_date) - new Date(a.release_date);
});

按对象的发布日期排序,也可以在控制台中按订单排序。但Angular仍然通过ID放置对象。

1 个答案:

答案 0 :(得分:1)

您可以使用orderBy过滤器来实现您想要的效果。看看:https://docs.angularjs.org/api/ng/filter/orderBy

无论如何,如果你进行了大量的收集操作,那么你最好先看看其中一个好的库,比如UnderscoreJS,Lodash等。

我使用Lodash,但只是偏好。

根据其他要求:

你需要在将数组划分为chuncks之前对其进行排序,然后在控制器上注入$ filter并执行此操作:

var orderBy = $filter('orderBy');
$scope.orderedMovies = orderBy($scope.movies, "release_date", false);
$scope.moviesRows = $scope.toRows($scope.orderedMovies, 6);