OrderBy 对象数组集合 Angular Js 出错

Question

错误出在HTML中> Angular 说它不能排序，因为它不是一个数组。

.HTML：

    <div class="container" ng-app="myApp" ng-controller="myCtrl2">
    <form>
      Escoje una Opción:
      <input type="radio" ng-model="myOption" value="Ultimas Actualizaciones" />Updates
      <input type="radio" ng-model="myOption" value="Populares de Siempre" />Populares de Siempre
    </form>
    <div>
      <div>
          <h3>{{myOption}}</h3>
          <div>
            <div class="frame" id="basic" >
              <ul class="clearfix" id="clearfixUpdate">
                <li style="font-size:02rem" ng-repeat="comic in comic_data[myOption]">
                   <a ng-href="{{comic.link}}">
                    <img width="162" height="225" alt="{{comic.titulo}}" src="{{comic.imagen}}" />
                    <span  class="titleUp">{{comic.titulo}}</span>
                  </a>
                </li>
              </ul>
            </div>
          <ul class="pages"></ul>
          </div>
      </div>
  </div>

</div>

JS数组对象集合示例：

var dataUpdates = {
  "Ultimas Actualizaciones": {
    "21": {
      "imagen": "imagen.jpg",
      "link": "https://.html",
      "titulo": "Title 21"
    },
    "1": {
      "imagen": "imagen.jpg",
      "link": "https://.html",
      "titulo": "Title 1"
    },
    "2": {
      "imagen": "imagen.jpg",
      "link": "https://.html",
      "titulo": "Title 2"
    }
  },
  "Populares de Siempre": {
    "0": {
      "titulo": "Title 0",
      "imagen": "imagen.jpg",
      "link": "https://.html"
    },
    "1": {
      "titulo": "Title 1",
      "imagen": "imagen.jpg",
      "link": "https://.html"
    }
  }
}

目前输出是这样的：

标题 1>标题 2>标题 21

但这是我想要创建的行为：

标题 21> 标题 2>标题 1

使用 OrderBy '-' 或 Orderby ：0：true 设置反向，我收到相同的错误，isNotArray

ng-repeat="comic in comic_data[myOption] | orderBy：'-'

Answer 1

您可以定义自定义过滤器并使用它来代替 orderBy 。在过滤器中你可以获取所有的对象键，以相反的顺序对它们进行排序，并按照需要呈现的顺序返回项目上的数组，过滤器的实现可能如下所示：

app.filter('objectSortReverse', function () {
    return function (input) {
       return Object.keys(input)
          .map(key => parseInt(key, 10))
          .sort((a, b) => b - a)
          .map(key => input[String(key)]);
    };
});

---

下面是一个基于您共享的代码的小演示，应该可以演示这个想法：

var app = angular.module('demo', []);
app.controller('myCtrl2', function ($scope) {
  $scope.myOption = 'Ultimas Actualizaciones';
  $scope.comic_data = {
    "Ultimas Actualizaciones": {
      "21": {
        "imagen": "imagen.jpg",
        "link": "https://.html",
        "titulo": "Title 21"
      },
      "1": {
        "imagen": "imagen.jpg",
        "link": "https://.html",
        "titulo": "Title 1"
      },
      "2": {
        "imagen": "imagen.jpg",
        "link": "https://.html",
        "titulo": "Title 2"
      }
    },
    "Populares de Siempre": {
      "0": {
        "titulo": "Title 0",
        "imagen": "imagen.jpg",
        "link": "https://.html"
      },
      "1": {
        "titulo": "Title 1",
        "imagen": "imagen.jpg",
        "link": "https://.html"
      }
    }
  }    
});
app.filter('objectSortReverse', function () {
    return function (input) {
       return Object.keys(input)
          .map(key => parseInt(key, 10))
          .sort((a, b) => b - a)
          .map(key => input[String(key)]);
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container" ng-app="demo" ng-controller="myCtrl2">
    <form>
      Escoje una Opción:
      <input type="radio" ng-model="myOption" value="Ultimas Actualizaciones" />Updates
      <input type="radio" ng-model="myOption" value="Populares de Siempre" />Populares de Siempre
    </form>
    <div>
      <div>
          <h3>{{myOption}}</h3>
          <div>
            <div class="frame" id="basic" >
              <ul class="clearfix" id="clearfixUpdate">
                <li style="font-size:01rem" ng-repeat="comic in comic_data[myOption] | objectSortReverse">
                   <a ng-href="{{comic.link}}">
                    <img width="162" height="225" alt="{{comic.titulo}}" src="{{comic.imagen}}" />
                    <span  class="titleUp">{{comic.titulo}}</span>
                  </a>
                </li>
              </ul>
            </div>
          <ul class="pages"></ul>
          </div>
      </div>
  </div>
</div>