AngularJS Data Driven dropdown with ng-repeat

Question

I have been trying to create data driven cascading dropdown menu with Angularjs for my chart. Here is what I got so far PLUNKER

 Year:
<select id="YearSelector">
  <option ng-repeat="year in filterOptions.stores">{{year.year}}</option>
 </select>
Quarter:
<select id="QuarterSelector">
  <option ng-repeat="quarter in filterOptions.stores">{{quarter.quarter}}</option>
</select>
Channel:
<select id="channel">
  <option ng-repeat="channel in filterOptions.stores">{{channel.channel}}</option>
</select>

I understand in my select ng-repeat loop thru data and display each one of data to my selection menu. But I only want to one time for each data.

OUTPUT of dropdown menu should only have:

• Year dropdown only: 2011, 2012
• Quarter dropdown only : 1 , 2
• Channel : Hypermarkets, Supermarkets

Answer 1

Add angular.filter in your module as:

angular.module('app',['angular.filter'])

and use it in your html page as follows:

  <select>
    <option ng-repeat="(key,value) in filterOptions.stores | groupBy: 'year'">
      {{key}}
    </option>
  </select>

I've done the year selector in this jsbin example , hope it helps.

Dependency include:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

Answer 2

Just create a filter which filter all the duplicate values

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });

      return output;
   };
});

then in your html pass the parameter based on which do you want to filter

 <select id="YearSelector">
      <option ng-repeat="year in filterOptions.stores | unique: 'year'">{{year.year}}</option>
     </select>
    Quarter:
    <select id="QuarterSelector">
      <option ng-repeat="quarter in filterOptions.stores  | unique: 'quarter'">{{quarter.quarter}}</option>
    </select>
    Channel:
    <select id="channel">
      <option ng-repeat="channel in filterOptions.stores | unique: 'channel'">{{channel.channel}}</option>
    </select>

AngularJs Remove duplicate elements in ng-repeat