ngChange 一堆下拉菜单

Question

所以我需要完全更改一组基于一个下拉菜单的 selection 出现的下拉菜单。我相信 ngChange 是解决问题的方法，但我不完全确定如何在两组 div 之间进行更改（或者这是否是最好的方法。

所以我有这个下拉菜单：

                <div class="input-group" theme="bootstrap" style="">
                <label>Product Type</label>
                <select class="dropdown-menu scrollable-menu form-control"  style="" ng-model="event.etype" ng-change="setOptions()" id="etype">
                    <option value="" selected disabled>Select a Product</option>
                    <option ng-click="type = 'x'">X</option>
                    <option ng-click="type = 'y'">Y</option>
                    <option ng-click="type = 'z'">Z</option>
                    <option ng-click="type = 'q'">Q</option>
                    <option ng-click="type = 'w'">W</option>
                </select>
                </div>

如果选择 X，我需要一组下拉菜单（包含在一行中），如果是其他选项，我需要一组完全不同的下拉菜单（包含在另一行中）。

下拉菜单的外观如下：

                        <div class="col-lg-3">
                            <label>Numbers</label>
                                <ui-select-match placeholder="Select Numbers">{{$item.admin_user.name}}</ui-select-match>
                                <ui-select-choices repeat="a in ams"> {{a.admin_user.name}} </ui-select-choices>
                            </ui-select>
          </div>
            </div>


        <div class="row col-lg-12" id="nonX">

            <div class="col-lg-3">
                <div class="input-group" theme="bootstrap">
                  <label>Super Heroes</label>
                  <select class="dropdown-menu scrollable-menu form-control" ng-model="superhero"  id="script">
                      <option value="" selected disabled>Select Superhero</option>
                      <option ng-repeat="superhero in superheroes" ng-value={{superhero}} ng-click="selectHeroe(superhero)">{{superhero.name}}</option>
                  </select>
                </div>
            </div>

            </div>
            </div>
        </div>


        <div class="row col-lg-12" id="noniPad"> 


            <div class="col-lg-3">
                <div class="input-group" theme="bootstrap">
                  <label>Screen</label>
                  <select class="dropdown-menu scrollable-menu form-control" ng-model="event.screen" id="screen">
                      <option value="" selected disabled>Select Screen</option>
                      <option ng-repeat="screen in screens" ng-value={{screen}} ng-click="selectScreen(screen)">{{screen.name}}</option>
                  </select>
                </div>
            </div>

            <div class="col-lg-3">
              <div class="input-group" theme="bootstrap">
                <label>Misc Asset</label>
                <select class="dropdown-menu scrollable-menu form-control"  ng-model="event.miscasset" id="miscasset">
                    <option value="" selected disabled>Select Misc Asset</option>
                    <option ng-repeat="miscasset in miscassets" ng-value={{miscasset}} ng-click="slectMiscAsset(miscasset)">{{miscasset.name}}</option>
                </select>
              </div>
            </div>

        </div>


                <div class="row m-b-sm m-t-sm"></div>
    </div>

单独的下拉菜单都出现在不同的行中。因此，如果它们 select iPad 我需要显示一行，如果它们不 select 和 iPad 则我需要显示一行。

我希望得到一些帮助。谢谢！

Answer 1

您最好的选择是根据父选择设置每个下拉菜单。无需创建副本 div 来保存两组下拉菜单。

我删除了所有 css 类和任何其他与 ng-change 无关的标记以使其更清晰。

您的父下拉列表如下所示：

<div>
   <label>Product Type</label>
   <select ng-model="event.etype" ng-change="setOptions(event.etype)">
      <option value="">Select a Product</option>
      <option ng-repeat="etype in etypes" ng-value="etype" ng-bind="etype"></option>
   </select>
</div>

请特别注意 setOptions 处理程序是如何传递 ng-model 值的。 This means when an option is selected, it'll automatically set ng-model="event.etype" to the value of that option.

要在您的控制器中支持此行为，您需要提供事件类型数组：

$scope.etypes = ['gif', 'photo', 'ipad', 'video', 'print'];

然后，在您的 setOptions 方法中，您将获得选定的选项并过滤后代下拉列表

var options1 = [{
    etype: 'ipad',
    value: '1'
}, {
    etype: 'gif',
    value: '2'
}];

$scope.setOptions = function (etype) {
    $scope.scripts = options1.filter(function (item) {
        return item.etype == etype;
    });
};

这意味着 setOptions 将根据传入的 etype 值设置后代下拉菜单。在这个例子中，我只限制为 $scope.scripts，但您可以设置多达需要的。如您所见，options1 只是一个数组，其中包含我需要过滤的 etype 属性。

最后，在您的后代下拉列表中，您将使用过滤后的选项：

<select ng-model="event.script">
   <option value="" selected disabled>Select Script</option>
   <option ng-repeat="script in scripts" ng-value="script.value" ng-bind="script.value"></option>
</select>

Answer 2

在行标签上使用 ng-hide="event.etype == null || event.etype=='ipad'" 和 ng-show="event.etype == 'ipad'" 解决了我的问题！

ngChange 一堆下拉菜单

ngChange a bunch of dropdowns

javascript

angularjs

angularjs-select