javascript - 使用单个ng-model过滤结果并显示过滤方法

Question

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

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

这是排序方法:

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

我正在使用 sortMethod 对一堆对象进行排序:

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

所有这些都工作得很好，但问题是选择框中的选项很难看，它显示“已创建”和“likes.count”，但它应该显示“最近”和“最近”之类的内容受欢迎”。

我尝试将 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 创建正确的 View 模型。

您应该看看如何使用 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>

然后在 Controller 中:

// 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