CountGradsky CountGradsky - 6 months ago 11
HTML Question

ng-repeat based on <select> option

Since I expanded my project I stumbled on a problem. This is my main object:

{
screens: [{
id: 0,
name: 'Screen0',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}, {
id: 1,
name: 'Screen1',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}, {
id: 2,
name: 'Screen2',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}]
};


The problem lays in the select tag which is being populated this way:

<select ng-model="ScreenService.config.screenConfig.current">
<option
value="{{screen.id}}"
ng-repeat="screen in ConfiguratorService.screens">
{{screen.name}}
</option>
</select>


In a separate container, but in the same controller, I am repeating sections within the screens. So I cannot do something like

ng-repeat = "screens in ConfiguratorService.screens"
ng-repeat = "sections in screens"
ng-repeat = "sectionItems in sections"


I need to repeat the sections based on the value of selected screen in dropdown.
I would like to avoid repeating them all and hiding them since they are heavily populated, but it might be a last resort.

Edit: Sections and sectionItems will be repeated as ul-li

Answer

Save your selected screen in a variable (by ng-model):

<select ng-model="selectedId">
  <option 
    value="{{screen.id}}" 
    ng-repeat="screen in ConfiguratorService.screens">
    {{screen.name}}
  </option>
</select>

In that seperate container, set the vm with ConfiguratorService.screens[selectedId].

For the original ng-model(ScreenService.config.screenConfig.current), it can be set by ScreenService.config.screenConfig.current = selectedId.

Comments