Question

我有一个HTML select元素，它提供了一些如何对列表进行排序的选项，它看起来像这样：

<select ng-init="sortMethod=sortMethods[0]" ng-model="sortMethod">
  <option ng-repeat="sortMethod in sortMethods">{{sortMethod}}</option>
</select>

和这里的sortMethod：

$scope.sortMethods = ['created', 'likes.count'];

我使用sortMethod对一堆对象进行排序：

<li ng-repeat="story in feedData|orderBy:sortMethod">
  Panel Count: {{story.frameURIs.length}}
</li>

所有这一切都很好，但问题是选择框中的选项很难看，它显示＆＃34;创建＆＃34;并且＆＃39; likes.count＆＃34;，但它应该说像＆＃34; Most Recent＆＃34;和＃34;最受欢迎＆＃34;。

我尝试将sortMethod更改为这样的对象数组：

$scope.sortMethods = [{'displayVal': 'Most Recent', 'sortVal': 'created'}, {'displayVal': 'Most Popular', 'sortVal': 'likes.count'}];

并在sortMethod.displayVal元素中显示select，并使用<li ng-repeat="story in feedData|orderBy:sortMethod.sortVal"，但这似乎是以看似随机的顺序对它们进行排序。如何在不更改feedData中的信息的情况下制作漂亮的选项？ feedData来自另一方，我无法改变它。

Answer 1

您正在考虑正确的方向 - 即为sortMethods创建正确的视图模型。

您应该了解如何使用ng-options为您的选择生成选项。它允许您设置显示值以及所选对象的内容。

具体来说，对于您的情况，您可以选择整个sortMethod对象（这将分配给ngModel），但会显示sortMethod.displayVal的标签。然后，您可以在过滤本身中使用sortVal。

所以，它看起来像是这样：

<select ng-model="selectedSortMethod"
      ng-options="sortMethod as sortMethod.displayVal for sortMethod in sortMethods">
</select>

<li ng-repeat="story in feedData|orderBy:selectedSortMethod.sortVal">
  Panel Count: {{story.frameURIs.length}}
</li>

然后在控制器中：

// as you did in your example
$scope.sortMethods = [
   {displayVal: 'Most Recent',  sortVal: 'created'}, 
   {displayVal: 'Most Popular', sortVal: 'likes.count'}
];

$scope.selectedSortMethod = $scope.sortMethods[0];

Plunker

使用单个ng模型过滤结果并显示过滤方法

1 个答案: