AngularJS - 为每个不同的值仅重复一次选择选项

时间:2014-11-21 13:25:55

标签: html angularjs angularjs-ng-repeat html-select

我在页面顶部有一个HTML选择框,该页面显示了一个文档列表。选择框将包含可用文件扩展名列表,以过滤文档列表。目前,我有:

<select data-ng-model="filterType">
    <option data-ng-repeat="item in docItems" value="{{item.extension}}">{{item.extension}}</option>
</select>

以上代码的作用是给我一个列表,例如:

  • XLS
  • XLS
  • XLS
  • 文档
  • XLS
  • PDF
  • PDF

但我想要的只是展示:

  • XLS
  • PDF
  • 文档

因此,它只显示每个可用值中的一个。

扩展名作为选项值保留也很重要,因为这是我在我的过滤器上使用的内容,如下所示:

 data-ng-repeat="docItem in docItems | filter:{extension: filterType}"

2 个答案:

答案 0 :(得分:1)

您需要遍历文件名数组并构建一个只有扩展的新数组。在您的控制器中执行此操作。

答案 1 :(得分:0)

您可以使用AngularUI中的唯一过滤器(此处提供的源代码:AngularUI独特过滤器)并直接在ng-options(或ng-repeat)中使用它。

<select ng-model="orderProp" ng-options="place.category for place in places | unique:'category'">
    <option value="0>Default</option>
    // unique options from the categories
</select>

取自How to make ng-repeat filter out duplicate results