Sort by Name with Dropdown

Question

I have no clue! I have an working Itemlist with Angular. Now i want a Sorting by a select-box.

Should be looking like this: preview

Here a Plunker: https://embed.plnkr.co/JYF0u9jBbsfyIlraH3BJ/

<div id="ideaList">
<div ng-controller="destinationsCtrl">
    <div class="filter">
        <p>Suchbegriff eingeben</p>
        <input type="text" ng-model="search" />
    </div>
    <div class="clearfix"></div>
    <div>Sort by:
        <select>
            <option value="idea.title">A-Z</option>
            <option value="destination.Dauer">Duration</option>
        </select>
    </div>
    <div class="clearfix"></div>
    <div class="container">
        <div ng-if="item.name == 'Thailand'" ng-repeat="item in items">
            <div class="row" ng-repeat="idea in item.ideas | orderBy: | filter:search">
                <div class="col-xs-4 col-md-2">
                    <div class="previewImg" style="background-image: url('{{idea.imageUrl}}') !important;"></div>
                </div>
                <div class="col-xs-8 col-md-8">
                    <h4>{{idea.title}}</h4>
                    <p class="truncate"><span ng-repeat="destination in idea.destinations"><b>{{destination.Dauer}}</b> {{destination.Ort}} </span>
                    </p>
                </div>
                <div class="col-xs-12 col-md-2"> <a href="{{idea.ideaUrl}}" class="btn btn-default btn-lightblue"><span ng-show="price in item.ideas">schon ab XXXX €  <i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                </div>
            </div>
        </div>
    </div>
</div>

This is my JS:

angular.module('destinationsApp', []).controller('destinationsCtrl', 

function ($scope, $http) {
    $http.get('https://raw.githubusercontent.com/MAHUKI-Webdesign/suntrips.github.io/master/data.json').then(function (itemsResponse) {
        $scope.items = itemsResponse.data;
    });
});

Can anybody help?

You can use orderBy with ng-repeat but you have to convert your object to an Array first: https://stackoverflow.com/a/19387871/2157581 — Gordon Mohrin, Jul 25 '17 at 08:13
[Please don't put tags in question titles](https://stackoverflow.com/help/tagging) — Liam, Jul 25 '17 at 09:37

score 1 · Accepted Answer · edited Jul 25 '17 at 09:38

As far as I can see, there's already the array of items and the array of destinations in every item of your JSON response, so you have no need to convert it to array.

Hope this will give you the idea what to do:

In template

...
<div>
    Sort by: 
    <select ng-model="sortExpression">
        <option value="title">A-Z</option>
        <option value="duration">Duration</option>
    </select>
</div>

...
<div ng-repeat="idea in item.ideas | orderBy : mySortFunction | filter:search">...

In controller

$scope.mySortFunction = function(idea) {
    switch ($scope.sortExpression) {
        case 'title':
            return idea.title;
            break;
        case 'duration':
            // You might have to add more logic here to pick a proper destination from the array, not just the 'idea.destinations[0]' item
            return idea.destinations[0].Dauer;
            break;
    }
};

Sort by Name with Dropdown

1 Answers1

In template

In controller