web-dev-qa-db-fra.com

Angular - Impossible de faire fonctionner l'ordre ng-repeatPar

J'ai essayé de nombreux exemples de ng-repeat avec orderBy, mais je ne peux pas faire fonctionner mon json avec.

<div ng-app>
    <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
    <div ng:controller="Main">
        <div ng-repeat="release in releases| orderBy:'environment_id'">      
            {{release.environment_id}}
        </div>
    </div>
</div>

Et le JSON

function Main($scope) {
$scope.releases = {
    "tvl-c-wbap001 + tvl-webapp": {
        "timestamp": " 05:05:53 PM ",
        "environment_id": "CERT5",
        "release_header": "Projects/Dev",
        "date": "19 Oct",
        "release": "12.11.91-1"
    },
    "tvl-c-wbap401 + tvl-webapp": {
        "timestamp": " 10:07:25 AM ",
        "environment_id": "CERT4",
        "release_header": "Future Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap301 + tvl-webapp": {
        "timestamp": " 07:59:48 AM ",
        "environment_id": "CERT3",
        "release_header": "Next Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap201 + tvl-webapp": {
        "timestamp": " 03:34:07 AM ",
        "environment_id": "CERT2",
        "release_header": "Next Changes",
        "date": "15 Oct",
        "release": "13.12.3-1"
    },
    "tvl-c-wbap101 + tvl-webapp": {
        "timestamp": " 12:44:23 AM ",
        "environment_id": "CERT1",
        "release_header": "Production Mirror",
        "date": "15 Oct",
        "release": "13.11.309-1"
    },
    "tvl-s-wbap002 + tvl-webapp": {
        "timestamp": " 12:43:23 AM ",
        "environment_id": "Stage2",
        "date": "15 Oct",
        "release": "13.11.310-1"
    },
    "tvl-s-wbap001 + tvl-webapp": {
        "timestamp": " 11:07:38 AM ",
        "environment_id": "Stage1",
        "release_header": "Production Mirror",
        "date": "11 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap001 + tvl-webapp": {
        "timestamp": " 11:39:25 PM ",
        "environment_id": "Production",
        "release_header": "Pilots",
        "date": "14 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap100 + tvl-webapp": {
        "timestamp": " 03:27:53 AM ",
        "environment_id": "Production",
        "release_header": "Non Pilots",
        "date": "11 Oct",
        "release": "13.11.309-1"
    }
}

Peu importe ce que j'écris, j'ai toujours le même ordre, ou je peux dire, pas d'ordre du tout.

javascriptjsonangularjsangularjs-ng-repeat
69
Luke SpringWalker

La orderBy ne fonctionne qu'avec les tableaux - Voir http://docs.angularjs.org/api/ng.filter:orderBy

Egalement un excellent filtre à utiliser pour les objets au lieu des tableaux @ Angularjs OrderBy sur ng-repeat ne fonctionne pas

99
tymeJV

Comme mentionné, seuls les tableaux sont autorisés. Mais pour simplifier les choses, vous pouvez convertir dynamiquement l’objet en un tableau via une fonction de tuyauterie, comme indiqué ici https://Gist.github.com/brev/3949705

Il suffit de déclarer le filtre et de l'ajouter à ng-repeat :)

<div ng-app="myApp">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="Main">
  <div ng-repeat="release in releases | object2Array | orderBy:'environment_id'">{{release.environment_id}}</div>
</div>

<script>

var app = angular.module('myApp', []).filter('object2Array', function() {
    return function(input) {
      var out = []; 
      for(i in input){
        out.Push(input[i]);
      }
      return out;
    }
  })
.controller('Main',function ($scope) {
        $scope.releases = {"tvl-c-wbap001 + tvl-webapp":{"timestamp":" 05:05:53 PM ","environment_id":"CERT5","release_header":"Projects/Dev","date":"19 Oct","release":"12.11.91-1"},"tvl-c-wbap401 + tvl-webapp":{"timestamp":" 10:07:25 AM ","environment_id":"CERT4","release_header":"Future Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap301 + tvl-webapp":{"timestamp":" 07:59:48 AM ","environment_id":"CERT3","release_header":"Next Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap201 + tvl-webapp":{"timestamp":" 03:34:07 AM ","environment_id":"CERT2","release_header":"Next Changes","date":"15 Oct","release":"13.12.3-1"},"tvl-c-wbap101 + tvl-webapp":{"timestamp":" 12:44:23 AM ","environment_id":"CERT1","release_header":"Production Mirror","date":"15 Oct","release":"13.11.309-1"},"tvl-s-wbap002 + tvl-webapp":{"timestamp":" 12:43:23 AM ","environment_id":"Stage2","date":"15 Oct","release":"13.11.310-1"},"tvl-s-wbap001 + tvl-webapp":{"timestamp":" 11:07:38 AM ","environment_id":"Stage1","release_header":"Production Mirror","date":"11 Oct","release":"13.11.310-1"},"tvl-p-wbap001 + tvl-webapp":{"timestamp":" 11:39:25 PM ","environment_id":"Production","release_header":"Pilots","date":"14 Oct","release":"13.11.310-1"},"tvl-p-wbap100 + tvl-webapp":{"timestamp":" 03:27:53 AM ","environment_id":"Production","release_header":"Non Pilots","date":"11 Oct","release":"13.11.309-1"}}
    });
</script>
89
Eike Thies

le filtre orderBy intégré ne fonctionnera plus lors de l'itération d'un objet. Il est ignoré en raison de la manière dont les champs d’objet sont stockés. Vous devez créer un filtre personnalisé

yourApp.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.Push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

<ul>
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
</ul>
27
Julian Mosquera

dans la réponse d'Eike Thies ci-dessus, si nous utilisons underscore.js, le filtre pourrait être simplifié comme suit:

var app = angular.module('myApp', []).filter('object2Array', function() {
  return function(input) {
    return _.toArray(input);
  }
});
10
nderoche

Voici une version du code de @Julian Mosquera qui prend également en charge le tri par objet key:

yourApp.filter('orderObjectBy', function () {
    return function (items, field, reverse) {
        // Build array
        var filtered = [];
        for (var key in items) {
            if (field === 'key')
                filtered.Push(key);
            else
                filtered.Push(items[key]);
        }
        // Sort array
        filtered.sort(function (a, b) {
            if (field === 'key')
                return (a > b ? 1 : -1);
            else
                return (a[field] > b[field] ? 1 : -1);
        });
        // Reverse array
        if (reverse)
            filtered.reverse();
        return filtered;
    };
});
3
Tom Söderlund

orderby fonctionne sur des tableaux contenant des objets avec des valeurs immédiates pouvant être utilisés comme filtres, c.-à-d.

controller.images = [{favs:1,name:"something"},{favs:0,name:"something else"}];

Lorsque le tableau ci-dessus est répété, vous pouvez utiliser | orderBy: 'favs' se réfère immédiatement à cette valeur, ou utilise un signe moins devant pour passer en ordre décroissant

<div class="timeline-image" ng-repeat="image in controller.images | orderBy:'-favs'">
    <img ng-src="{{ images.name }}"/>
</div>
1
serdarsenay

Vous allez devoir reformater votre objet releases pour qu'il soit un tablea d'objets. Ensuite, vous pourrez les classer comme vous le souhaitez.

1
CJ Cenizal