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_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>

OrderBy对象数组集合角度Js错误

1 个答案: