javascript - 使用下拉菜单按名称排序

Question

我不知道!我有一个可用的 Angular 项目列表。现在我想要按选择框排序。

应该看起来像这样:preview

这里有一个骗子: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>

这是我的 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;
    });
});

有人可以帮忙吗？

Answer 1

据我所知，JSON 响应的每个项目中已经存在项目数组和目的地数组，因此您无需将其转换为数组。

希望这能让您知道该怎么做:

在模板中

...
<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">...

在 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;
    }
};