angularjs ng repeat中的错误顺序

Bad order in angularjs ng-repeat

本文关键字：错误 顺序 ng repeat angularjs      更新时间：2023-09-26

在我的小播放列表脚本中：http://www.monde-du-rat.fr/zombieReport/popup.html#/radio

IDS的顺序不正确：1,10,11,2,3。。。

我的json在这里http://www.monde-du-rat.fr/zombieReport/resources/data/radio.json，而我的html是：

            <div ng-repeat="song in songs.radio track by song.id | orderBy:'song.id*1'" class="list-group-item" id="{{song.id}}" ng-class="{ 'active' : songPlayed_name == song.name }">
            </div>

怎么了？

您可以使用https://github.com/petebacondarwin/angular-toArrayFilter

请在此处查看演示http://plnkr.co/edit/PrALxOJfmtcXUntbPmSz?p=preview

<div ng:controller="Main">
      <div ng:repeat="song in songs.radio | toArray | orderBy: 'id'">
        {{song.id}} {{song.title}}
      </div>

JS:

 angular.module('app', ['angular-toArrayFilter'])
    .controller('Main', function Main($scope) {
      $scope.songs = {
        "radio": {
          "1": {
            "id": 1,
            "name": "coucou",
            "title": "'"Coucou, tu veux voir ma bite ?'" l'hymne officiel du MDR !",
            "vote": "7,5"
          },
          "2": {
            "id": 2,
            "name": "kissed",
            "title": "'"I kissed a rat'" - KitschNSniff",
            "vote": "9,5"
          },
          "3": {
            "id": 3,
            "name": "rats",
            "title": "'"It's Rats, It's Rats, It's Rat'" - KitschNSniff",
            "vote": "9,5"
          },
          "4": {
            "id": 4,
            "name": "merguez",
            "title": "'"Merguez-Partie'" - le tube culte",
            "vote": "8,5"
          },
          "5": {
            "id": 5,
            "name": "etchebest",
            "title": "'"Etchebest 1664'" - la pub culte",
            "vote": "8,5"
          },
          "6": {
            "id": 6,
            "name": "gitan",
            "title": "'"Gitan énervé'" - LE SANG DE VOS MORTS !",
            "vote": "7,5"
          },
          "7": {
            "id": 7,
            "name": "coral",
            "title": "'"Karl, Koraaal, Koarl, Karol'"",
            "vote": "5,5"
          },
          "8": {
            "id": 8,
            "name": "sax",
            "title": "'"Saxo Guy'" - musique idéale pour se détendre",
            "vote": "6,5"
          },
          "9": {
            "id": 9,
            "name": "longtime",
            "title": "'"Tomorow is a long time'" - Bob Dylan",
            "vote": "5,5"
          },
          "10": {
            "id": 10,
            "name": "blackbird",
            "title": "'"Blackbird Song'" - Lee DeWyze",
            "vote": "7,5"
          },
          "11": {
            "id": 11,
            "name": "crazy",
            "title": "'"Crazy'" - Ninet Tayeb & the Rose Band",
            "vote": "6,5"
          }
        }
      }
    })

问题是您的id实际上是字符串，而不是数字。您可以正确地格式化JSON（而不是将数字括在引号中），或者只遍历列表并将这些字符串解析为整数值。

angular.forEach($scope.songs.radio, function (song) {
  song.id = parseFloat(song.id, 10);
});

您的代码有两个问题：

  • 您不希望按song.id而是按id对项目进行排序
  • 要对项目进行排序，它们应该包含在数组中，而不是对象中

我改变了两个观点，这是一个有效的plunkr：http://plnkr.co/edit/CaU5TbFQTm9hVls5S3RG?p=preview

相关文章：