CODEWITHSUNDEEP
angularjsangularjs-orderby
Chrillewoodz
Chrillewoodz

Reputation: 28328

AngularJS orderBy not working at all despite ng-repeat over an array of objects

I can't figure out why my orderBy filter isn't working at all, I've looked at every freaking solution out there and all point to the fact that the ng-repeat is operating on an object of objects instead of array of objects. But mine is an array of objects as seen here:

[Object, Object, Object]

0: Object
  $$hashKey: "object:19"
  dataLink: ""
  id: "633"
  name: "My first graph"
  order: 1
  parentTarget: ""
  presenceLink: ""
  size: 12
  span: 1
  subType: 1
  type: 1
  __proto__: Object
1: Object
  $$hashKey: "object:20"
  dataLink: ""
  id: "634"
  name: "My second graph"
  order: 2
  parentTarget: ""
  presenceLink: ""
  size: 6
  span: 1
  subType: 1
  type: 3
__proto__: Object
2: Object
  $$hashKey: "object:21"
  dataLink: ""
  id: "635"
  name: "My third graph but in front"
  order: 1
  parentTarget: ""
  presenceLink: ""
  size: 12
  span: 0
  subType: 1
  type: 1
__proto__: Object

So how come this isn't working:

<ul class="row graphs-list">
  <li class="col-xs-12 col-sm-6 col-md-{{graph.size}} graphs-item" ng-repeat="graph in ds.graphs | orderBy:'graph.order'">
    <pre>
      {{graph.order}}
    </pre>
    <h5 class="graph-name" ng-bind="graph.name"></h5>
    <am-menu host="graph" options="graphs"></am-menu>
    <nvd3 options="gv.options[gv.getTypeFromId(graph.type)]" data="gv.data[gv.getTypeFromId(graph.type)]"></nvd3>
  </li>
</ul>

Any ideas?

Upvotes: 1

Views: 1622

Answers (3)

Hadi
Hadi

Reputation: 17289

try this.

function Main($scope) {
    $scope.items = [
      {
        id: "633", name: "My first graph",order: 8, parentTarget: "",
         presenceLink: "",size: 12,span: 1,subType: 1,type: 1
       },
     {
       id: "634",name: "My second graph", order: 2,parentTarget:    "",
       presenceLink: "",size: 6,span: 1,subType: 1,type: 3
     }
    ];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
    <div ng-controller="Main">
  <ul class="row graphs-list">
  <li  ng-repeat="item in items | orderBy:'order'">
    <pre>
      {{item.order}}
    </pre>
  </li>
</ul>
    </div>
</div>

Upvotes: 1

RamaKrishna
RamaKrishna

Reputation: 217

You can try this out :)

(function(angular) {
  'use strict';
angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.graphs =
        [{id:'633', name:"My first graph", order:1},
         {id:'634', name:"My Second graph", order:4},
         {id:'635', name:"My Third graph", order:5},
         {id:'636', name:"My Fourth graph", order:6},];
  }]);
})(window.angular);

in HTML Page

<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="graph in graphs | orderBy: 'order'">
      <td>{{graph.id}}</td>
      <td>{{graph.name}}</td>
      <td>{{graph.order}}</td>
    </tr>
  </table>
</div>
</body>

Upvotes: 1

Martijn Welker
Martijn Welker

Reputation: 5605

Angular's orderBy already looks inside the current object for the specified key as you can see here, so you just have to give the key like so:

<li class="col-xs-12 col-sm-6 col-md-{{graph.size}} p-x-md p-y-sm bg-light graphs-item" ng-repeat="graph in ds.graphs | orderBy:'order'">

Upvotes: 5

Related Questions