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>

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

1 个答案: