OrderBy 对象数组集合 Angular Js 出错答案

【问题标题】：Error with OrderBy Object Array Collection Angular JsOrderBy 对象数组集合 Angular Js 出错
【发布时间】：2019-01-10 20:47:41
【问题描述】：

错误在 HTML 中> Angular 说它不能 orderBy，因为它不是数组。

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:'-'

【问题讨论】：

什么是comic_data？您显示的唯一对象是 dataUpdates，这不是数组，也不是该对象中每个键的值。

标签： javascript html angularjs

【解决方案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>

【讨论】：