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
– Ravi Teja, Commented Sep 27, 2016 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
– mtkilic, Commented Sep 27, 2016 at 15:29

charly3pins · Accepted Answer · 2016-09-27 20:50:53Z

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, 2016 at 20:50

answered Sep 27, 2016 at 15:36

charly3pins

3881 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mtkilic Over a year ago

I do not why but this approach doesnt solver other dropdown. I try to follow the document you shared but still didnt worked

charly3pins Over a year ago

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.

mtkilic Over a year ago

I see where I did wrong, I try to use "MainController" only in div to cover all select. Thanks for updating.

Community · Accepted Answer · 2017-05-23 10:34:08Z

1

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

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Sep 27, 2016 at 15:34

Ravi Teja

1,1058 silver badges13 bronze badges

1 Comment

mtkilic Over a year ago

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

Collectives™ on Stack Overflow

AngularJS Data Driven dropdown with ng-repeat

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related