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

Do you mean you do not want your data to be updated? you want it to be rendered only for the first time? — Ravi Teja, Sep 27 '16 at 15:19
@RaviTeja I do want my data be updated, but since I will use this dropdown for filtering, I do not need "Year" 2011 appear on my dropdown more than one time. Same for quarter and channel. I hope this answered your question — mtkilic, Sep 27 '16 at 15:29

charly3pins · Answer 1 · 2016-09-27T20:50:53.417

2

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>

edited Sep 27 '16 at 20:50

answered Sep 27 '16 at 15:36

charly3pins

389
1
11

I do not why but this approach doesnt solver other dropdown. I try to follow the document you shared but still didnt worked – mtkilic Sep 27 '16 at 17:50
I modified the old JS Bin (same link) to work fine in your case. Using the same ng-controller for the three selectors "join" all filters together. If you use individual ng-controller (even though being the same "MainController") don't "join" the filters. – charly3pins Sep 27 '16 at 20:47
I see where I did wrong, I try to use "MainController" only in div to cover all select. Thanks for updating. – mtkilic Sep 28 '16 at 03:09

score 1 · Accepted Answer · edited May 23 '17 at 10:34

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

Thank you, this worked as well, to be honest I didn't think about searching "duplicate elements" Because I looked SO didn't find anything first — mtkilic, Sep 27 '16 at 16:12

AngularJS Data Driven dropdown with ng-repeat

2 Answers2