ng-repeat 基于 <select> 选项

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"

我需要根据 selected 屏幕在下拉菜单中的值重复这些部分。我想避免全部重复并隐藏它们，因为它们人口稠密，但这可能是最后的手段。

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

Answer 1

这是使用三个 select 下拉菜单的方法： https://jsfiddle.net/u037x1dj/1/

使用多个嵌套 <optgroup> 绝对是乱七八糟的。我会重新考虑您要尝试做的事情并重新设计 UI。但这就是你的做法：

<select ng-model="myModel">
    <optgroup label="screen_{{screen.id}}" ng-repeat="screen in screens">
        <optgroup label="section_{{section.id}}" ng-repeat="section in screen.sections">
            <option ng-repeat="sectionItem in section.sectionItems" value="sectionItem.id">{{sectionItem.name}}</option>
        </optgroup>
    </optgroup>
</select>

编辑： 我会有三个单独的下拉菜单，随后的下拉菜单将过滤之前 selected 的内容。如果尚未 select 编辑第一个下拉菜单，请使用 ng-disabled 禁用下拉菜单。

屏幕：

<select ng-model="selectedScreen" ng-options="screen as screen.name for screen in screens">
</select>

栏目：

<select ng-disabled="selectedScreen === null" ng-model="selectedSection" ng-options="section as section.name for section in screens.sections | filter: selectedScreen">
</select>

栏目项目：

<select ng-disabled="selectedSection === null" ng-model="selectedSectionItem" ng-options="item as item.name for item in screens.sections.sectionItems | filter: selectedSection">
</select>

Answer 2

将您选择的屏幕保存在变量中（通过 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设置。

Answer 3

如果我没理解错的话，我想你正在寻找这样的东西。您需要在 select 标签中挂钩一个 ng-change，找到与 ID selected 相关的对象，然后创建第二个 ng-repeat。

这是一个例子：

https://jsfiddle.net/relferreira/ja776cej/

HTML:

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    <select data-ng-model="mainVm.selectedScreenIndex" data-ng-change="mainVm.select()">
      <option 
      value="{{screen.id}}" 
      ng-repeat="screen in mainVm.screens">
       {{screen.name}}
      </option>
  </select>
  <ul>
    <li data-ng-repeat="sectionItems in mainVm.selectedItem.sections">{{sectionItems}}</li>
  </ul>
  </div>

</div>

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;
  vm.select = select;
  vm.selectedScreen = null;
  vm.selectedScreenIndex = null;
  vm.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: []
    }]
  }];

  function select(){
    vm.screens.forEach(function(item){
        if(item.id == vm.selectedScreenIndex){
        vm.selectedItem = item;
      }
    });
  }

}

Answer 4

检查这是否适合您....

第二个 select 值将根据第一个 selected Id 显示。所以第二个 select 下拉列表值只会在你 select 第一个 select 下拉列表之后出现。

 <html>
<head>
  <title>Angular JS Controller</title>
  <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
  <div ng-app = "mainApp" ng-controller = "studentController">
     <select ng-model="current" ng-change="captureChange(current)" ng-options="option.id as option.name for option in screens">
     </select>
     <select ng-model="current123" ng-options="item.id as item.name for item in Collectval" ng-change="captureItemChange(current123)">
     </select>
  </div>

  <script>
     var mainApp = angular.module("mainApp", []);
     mainApp.controller('studentController', function($scope) {
      $scope.screens= [{
                            id: 0,
                            name: 'Screen0',
                            sections: [{
                                id: 0,
                                sectionItems: [
                                {id:1, name:"Aarthi"},{id:2, name:"Roopa"}
                                ]
                            }, {
                                id: 1,
                                sectionItems: [
                                {id:3, name:"Chitra"},{id:4, name:"Prakash"}
                                ]
                            }, {
                                id: 2,
                                sectionItems: [
                                {id:5, name:"Lalitha"},{id:6, name:"Sekaran"}
                                ]
                            }]
                        }, {
                            id: 1,
                            name: 'Screen1',
                            sections: [{
                                id: 0,
                                sectionItems: [
                                {id:7, name:"Vijay"},{id:8, name:"Sethupathi"}
                                ]
                            }, {
                                id: 1,
                                sectionItems: [
                                {id:9, name:"Aravind"},{id:10, name:"Swamy"}
                                ]
                            }, {
                                id: 2,
                                sectionItems: [
                                {id:11, name:"Vinay"},{id:12, name:"Raja"}
                                ]
                            }]
                        }, {
                            id: 2,
                            name: 'Screen2',
                            sections: [{
                                id: 0,
                                sectionItems: [
                                {id:13, name:"Brian"},{id:14, name:"Laura"}
                                ]
                            }, {
                                id: 1,
                                sectionItems: [
                                {id:15, name:"Sachin"},{id:16, name:"Tendulkar"}
                                ]
                            }, {
                                id: 2,
                                sectionItems: [
                                {id:17, name:"Rahul"},{id:18, name:"Dravid"}
                                ]
                            }]
                        }]
                        $scope.Collectval=[];
                        $scope.captureChange = function(val){
                        angular.forEach($scope.screens,function(item){
                        if(item.id==val){
                        angular.forEach(item.sections, function(data){
                        angular.forEach(data.sectionItems, function(vval){
                        $scope.Collectval.push(vval);
                        })

                        })
                        }
                        })
                        };

                        console.log($scope.Collectval);
        $scope.captureItemChange = function(value){
        //alert(value);
        }                

     });
  </script>

ng-repeat 基于 <select> 选项

ng-repeat based on <select> option

html

javascript

angularjs

ng-repeat