基于<select>选项的ng-repeat

Question

自从我扩展我的项目后,我偶然发现了一个问题.这是我的主要目标:

{
  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: []
    }]
  }]
};

问题出现在以这种方式填充的select标记中:

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

在一个单独的容器中,但在同一个控制器中,我在屏幕内重复部分.所以我做不了类似的事情

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

我需要根据下拉菜单中所选屏幕的值重复这些部分.我想避免重复它们并隐藏它们,因为它们人口密集,但它可能是最后的手段.

编辑:Sections和sectionItems将重复为ul-li

Answer 1

将所选屏幕保存在变量中(通过ng-model):

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

在该单独的容器中,使用设置vm ConfiguratorService.screens[selectedId].

对于原始ng-model(ScreenService.config.screenConfig.current),可以通过设置ScreenService.config.screenConfig.current = selectedId.