根据选定的过滤器选项使用角度填充表格

Question

目前，我正在返回carType结果，如下所示：

Truck  
SUV  
Sedan  
Truck  
SUV 

我想填充一个过滤器选择框，因此它将具有以下选项，而无需重复：

 Truck
 Sedan
 SUV

我当前的问题是我的选择框显示所有CarType结果，其中包括我想消除的重复项。

另外，选择过滤器后我的结果显示不起作用，并且我没有收到错误，因此我无法发现问题所在。

<label for="filters">Filter on Car Type</label>
        <select id="filters" ng-model="selectedType" ng-options="x.type as x.type for x in result">
            <option value="">Select Car Type</option>
        </select>

在我要根据过滤器显示结果的表中：

<tr ng-repeat="x in result|filter:selectedTDL">
            <td data-title="Car Type">{{x.type}}</td>
            <td data-title="Year">{{x.year}}</td>
        </tr>

不知道我想念的是什么或要显示的结果有什么问题。

更新：我能够解析过滤部分并基于过滤选项显示。 但是不确定如何在过滤选择语句中消除重复。

Answer 1

您应该自己从列表中过滤出重复的值。 您可以使用过滤器来实现此目的。

 var app = angular.module("sampleApp", []); app.controller("sampleController", ["$scope", function($scope) { $scope.result = [{ type: "SUV" }, { type: "SUV" }, { type: "Truck" }, { type: "SUV" }, { type: "Van" }, { type: "Truck" }]; } ]); app.filter('unique', function() { return function(input) { let output = []; input.forEach((item) => { if (!output.includes(item.type)) { output.push(item.type); } }); return output; }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <div ng-app="sampleApp"> <div ng-controller="sampleController"> <label for="filters">Filter on Car Type</label> <select id="filters" ng-model="selectedType" ng-options="x for x in result | unique"> <option value="">Select Car Type</option> </select> </div> </div>