Sorting array in angular doesn't work

Question

I have the following structure:

array(
  array('id' => 1, 'name' => 'aaa', 'thumbnailUrl' => 'some1'),
  array('id' => 2, 'name' => 'ccc', 'thumbnailUrl' => 'some2'),
  array('id' => 3, 'name' => 'bbb', 'thumbnailUrl' => 'some3')
)

And I display it like this:

<div ng-controller="CreationController">
<input type="radio" name="sortBy" id="id" ng-click="reverse=false;order('id',reverse)"><label for="id">id</label>
<input type="radio" name="sortBy" id="name" ng-click="reverse=false;order('name',reverse)"><label for="name">name</label>

    <div class="creations accordion" ng-repeat="creation in creations">
        <h3>
            {if !empty("[[creation.thumbnailUrl]]")}
                <img src="[[creation.thumbnailUrl]]" class="creation-thumb-header">
            {else}
                 <img src="/image/placeholder.png" class="creation-thumb-header">
            {/if}
            #[[creation.id]] [[creation.name]]
        </h3>
        <div class="row">
            [[creation.name]]
        </div>
    </div>
</div>

I use smarty to do that, along with angular ([[ and ]] tags). The problem is that the array is not being sorted. Clicking radio buttons changes nothing.

What's wrong, and how to do this?

exampleApp.controller('CreationController', ['$scope', '$filter', function($scope, $filter) {
    var orderBy = $filter('orderBy');
    $scope.creations = creations;
    $scope.order = function(predicate, reverse) {
      $scope.creations = orderBy($scope.creations, predicate, reverse);
    };
    $scope.order('id',true);
}]);

Also, is there a way to do this using select? Could you provide some example?

what is `creations` in your angular code? can you provide rendred html also? do you see any errors in browser console? — Grundy, Aug 05 '15 at 11:59
Put orderBy filter in ng-repeat. The order field can be dinamic. For example: `ng-repeat="creation in creations | orderBy: 'myOrderField'"` — mggSoft, Aug 05 '15 at 12:03
@mggSoft, inside `order` function updated collection `$scope.creations` so if it run without errors - all should work — Grundy, Aug 05 '15 at 12:05
how you pass it to js? structure in top - is php array, but how you pass it in js? — Grundy, Aug 05 '15 at 13:07
`var creations = "";`. But it is an object, and I cannot sort objects as far as I know. How do I convert multidimentional array of objects into multidimentional array of arrays? — khernik, Aug 05 '15 at 13:15
@KarolHernik, see [this post](http://stackoverflow.com/questions/6857468/a-better-way-to-convert-js-object-to-array) — Grundy, Aug 05 '15 at 13:33

score 1 · Accepted Answer · answered Aug 05 '15 at 12:24

1

You should to use the field and reverse information directly on repeat:

I made a jsbin to show this: jsbin angular orderBy

at your code:

<div class="creations accordion" ng-repeat="creation in creations | orderBy : field : reverse">

this code also take care of reverse field, to invert on second click:

<button ng-click="order('id')">Order by id</button>
<button ng-click="order('name')">Order by name</button>

with function:

$scope.order = function(field) {
    $scope.reverse = ($scope.field === field) ? ! $scope.reverse : false;
    $scope.field = field;
};

answered Aug 05 '15 at 12:24

Joao Polo

2,153
1
17
26

if I set for example orderBy: name, it doesn't change anything – khernik Aug 05 '15 at 12:55
Yes, you need to send a string. orderBy: 'name'... if you use name, angular will search for $scope.name, with doesn't exists – Joao Polo Aug 05 '15 at 12:58
Ahh, that's because creations is not an array - console log shows: `object [object,object,object]`. How can I convert it to array? – khernik Aug 05 '15 at 13:14

Sorting array in angular doesn't work

1 Answers1