Populate table based on selected filter option using angular

Question

Currently i am returning carType results like so:

Truck  
SUV  
Sedan  
Truck  
SUV

I would like to populate a filter select box so it will have the following as options without repetition:

 Truck
 Sedan
 SUV

My current problem is that my select box displays all CarType results which includes repeated items which i would like to eliminate.

Also my display of results after selecting a filter is not working and i am not getting an error so i don't spot where my problem is exactly.

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

in my table where i am wanting to display results based on filter:

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

not sure what i am missing or what is wrong for the results to display.

UPDATE: i was able to resolve the filtering portion and display based on filtered option. But not sure how to eliminate duplication in the filtering select statement.

try this: http://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results — elfan, Nov 06 '16 at 23:32

score 1 · Answer 1 · answered Nov 07 '16 at 00:05

You should filter out the duplicate values from your list yourself. You could use filters to achieve this.

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>

Populate table based on selected filter option using angular

1 Answers1