CODEWITHSUNDEEP
ember.js
Pedro4441
Pedro4441

Reputation: 261

Ember Select set default value when the content change

I have got 2 selects, and the second one (multiple) depends on the first one (simple)

First one:

{{view Ember.Select content=siteGroups selection=selectedSiteGroup}}

Second one:

 {{view Ember.Select content=sites optionLabelPath="content.name"  value=selectedSite multiple=true selection=selectedSiteDefault}}

So, the selectedSiteGoup (select 2) changes the content of the first one.

I have set the default value of the second one:

selectedSiteDefault: function(){
  return this.get('sites.firstObject');
}.property('selectedSiteGroup')

And it works, but when the content change (due to the first select) it doesnt set any value as default.

How could I solve that?

Upvotes: 0

Views: 320

Answers (1)

blessanm86
blessanm86

Reputation: 31779

Here is a demo with 2 select boxes. The contents of the second select box is based on the first select box.

The default value of the second select box is the last item.

var continents = ['America', 'Europe', 'Asia'];
var countries = {
  'America': ['Texas','New York'],
  'Europe': ['Estonia','Germany'],
  'Asia': ['India','China']
};

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      'continents': continents,
      'countries': countries
    };
  }
});

App.IndexController = Em.ObjectController.extend({
  continent: 'Asia',
  country: function() {
    return this.get('countries.'+this.get('continent'));
  }.property('continent'),
  countrySel: function() {
    return this.get('country.lastObject');
  }.property('country.[]')
});

{{view Ember.Select content=content.continents valueBinding="continent"}}
{{view Ember.Select content=country selection=countrySel}}

Upvotes: 1

Related Questions