我不知道! 我有一个可用的 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;
});
});
有人可以帮忙吗?
最佳答案
据我所知,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;
}
};
关于javascript - 使用下拉菜单按名称排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45297476/