根據Angular JS中對象數組內的數組長度排序

Question

考慮以下示例，

var arrayOfObject = [
{name: 'ron', data: [1,3,5]},
{name: 'raj', data: [2,3]},
{name: 'roy', data: [1]}
]

在視圖中，我需要根據每個對象中data數組的長度以升序對對象進行排序。

在上面的示例中，roy，raj，ron。

我總是可以遍歷數組，找到長度並對其進行排序，但是想知道是否有一種使用Angular的OrderBy篩選器 （視圖或控制器）對其進行排序的方法。

謝謝，

Answer 1

是的，您可以使用angular的OrderBy過濾器 。

鑒於：

<div ng-repeat="item in arrayOfObject | orderBy:'data.length'">

或在控制器中：

var ordered = $filter("orderBy")(arrayOfObject, "data.length");

看到這個jsfiddle

Answer 2

<div ng-repeat="item in array| orderBy:'data.length'>

這里orderBy接受data屬性

Answer 3

我們可以使用orderby子句

升序

<div ng-repeat="item in arrayOfObject | orderBy:'data.length'">
    {{item.name}}:{{item.data.length}}
  </div>

對於降序，我們需要使用“-”號（在單引號內）

<div ng-repeat="item in arrayOfObject | orderBy:'-data.length'">
    {{item.name}}:{{item.data.length}}
  </div>

Answer 4

嘗試這個

  <div ng-repeat="item in arrayOfObject | orderBy:'data.length'">
    {{item.name}}:{{item.data.length}}
  </div>

 var app = angular.module("app", []); app.controller("ctrl", function($scope) { $scope.arrayOfObject = [{ name: 'ron', data: [1, 3, 5] }, { name: 'raj', data: [2, 3] }, { name: 'roy', data: [1] } ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> ASEC: <div ng-repeat="item in arrayOfObject | orderBy:'data.length'"> {{item.name}}:{{item.data.length}} </div> <br/> DESC: <div ng-repeat="item in arrayOfObject | orderBy:-'data.length'"> {{item.name}}:{{item.data.length}} </div> </div> 

Answer 5

請嘗試以下操作：

 var myApp = angular.module('myApp', []); myApp.controller('myController', ['$scope', '$filter', function($scope, $filter){ var arrayOfObject = [ {name: 'ron', data: [1,3,5]}, {name: 'raj', data: [2,3]}, {name: 'roy', data: [1]} ] $scope.arrayOfObject = $filter("orderBy")(arrayOfObject, 'data.length'); console.log($scope.arrayOfObject); }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='myApp' ng-controller='myController'> </div>