使用下拉列表按名称排序

Posted 2023-05-09

【中文标题】使用下拉列表按名称排序

【英文标题】：Sort by Name with Dropdown

【发布时间】：2017-12-31 00:52:15

【问题描述】：

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

应该是这样的：preview

这是一个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>

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

有人可以帮忙吗？

【问题讨论】：

您可以将 orderBy 与 ng-repeat 一起使用，但您必须先将对象转换为数组：***.com/a/19387871/2157581

mySortFunction 在哪里？

我推迟了它，因为它不起作用

见plnkr.co/edit/?p=preview了解信息

embed.plnkr.co/JYF0u9jBbsfyIlraH3BJ

【参考方案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">...

在控制器中

$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;
    
;