Mahmut Kilic Mahmut Kilic - 2 months ago 22
AngularJS Question

AngularJS Data Driven dropdown with ng-repeat

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

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>