Question

我在创建动态下拉列表时遇到问题。我有这个选择选项。

已更新

 <div class="form-group has-feedback">
   <label class="control-label">Type</label><br/>
   <select class="form-control" ng-model="selectedItem" ng-options="item as item.name for item in items">
    <option value=""> Select Type</option>
   </select>
 </div>

 <div class="form-group has-feedback" ng-class="addstep.stepA.$valid ? 'has-success' : 'has-error';"
             ng-if="item.type==0||item.type==4||item.type==7||item.type==9">
  <label class="control-label">{{labelA}}</label>
   <input type="url" class="form-control" ng-model="stepA" name="stepA" required>
 </div>

条件1：假设用户选择鸡肉，新下拉列表将显示为

   <option value="0">Drumstick</option>
   <option value="1">Thigh</option>
   <option value="2">Wing</option>

条件2：假设用户选择鱼，不会出现任何选项。用户只需点击提交按钮

即可

<button type="button" class="btn btn-primary" ng-click="add();"
            ng-class="isLoading ? 'disabled' : '';">Add
</button>

已更新

$dialogScope.items = [{
                name:"Download APK",
                type: "0",
            },{
                name:"Backup",
                type:"1"
            },{
                name:"Restore",
                type:"2",
            },{
                name:"Download OBB",
                type:"4",
            },{
                name: "Download OBB By GPU",
                options : ["Adreno","Mali","Tegra","PowerVR","Other"]
            },{
                name: "Download APK By GPU",
                options : ["Adreno","Mali","Tegra","PowerVR","Other"]
            },{
                name: "Download CACHE",
                type:"7",
            },{
                name: "Download CACHE By GPU",
                type:"8",
            },{
                name: "Download CACHE & Unzip After Install",
                type:"9",
            },{
                name: "Download CACHE By GPU & Unzip After Install",
                type:"10",
            },

            ];

Answer 1

创建一个对象数组，例如：

$scope.items = [
  {
    name: "Chicken",
    options: ["Drumstick", "Thigh", "Wing"]
  }, 
  {
    name: "Meat",
    options: ["Lamb", "Goat"]
  }, 
  {
    name: "Fish"
  }
];

使用ng-options显示项目列表。

<select ng-model="selectedItem" ng-options="item as item.name for item in items">
  <option value="">Select a type</option>
</select>

有第二个下拉列表，它将显示每个项目的选项。如果所选项目具有ng-if属性，则使用options仅显示下拉列表。我把标签和下拉包装在div中以隐藏它们。

<div ng-if="selectedItem.options">
  <label class="control-label">Option</label>
  <br/>
  <select ng-model="selectedOption" ng-options="o as o for o in selectedItem.options">
  </select>
</div>

更新OP

如果没有其他选项，要包含评论，请使用ng-if="!selectedItem.options"。我再次将它包装在div中以隐藏标签和输入。 ng-if还会通过检查selectedItem是否存在来检查是否先选择了某个项目。

<div ng-if="selectedItem && !selectedItem.options">
  <label class="control-label">Comment</label>
  <br/>
  <input type="text" ng-model="selectedItem.comment" />
</div>

var app = angular.module("app", []);

app.controller("controller", function($scope) {

  $scope.items = [{
    name: "Chicken",
    options: [
      "Drumstick",
      "Thigh",
      "Wing"
    ]
  }, {
    name: "Meat",
    options: [
      "Lamb",
      "Goat",
    ]
  }, {
    name: "Fish"
  }];

});

div {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">

  <div>
    <label class="control-label">Type</label>
    <br/>
    <select ng-model="selectedItem" ng-options="item as item.name for item in items">
      <option value="">Select a type</option>
    </select>
  </div>

  <div ng-if="selectedItem.options">
    <label class="control-label">Option</label>
    <br/>
    <select ng-model="selectedOption" ng-options="o as o for o in selectedItem.options">
    </select>
  </div>

  <div ng-if="selectedItem && !selectedItem.options">
    <label class="control-label">Comment</label>
    <br/>
    <input type="text" ng-model="selectedItem.comment" />
  </div>  
  
  <button type="button" class="btn btn-primary" ng-click="add();">Add</button>

</div>

Answer 2

这是您想要的示例，将您的数据结构更改为此

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.Types  = [
  {
    name: "Chicken",
    value: 0
  }, 
  {
    name: "Meat",
    value: 1,
  }, 
  {
    name: "Fish",
    value: 2
  }];
  
  $scope.subItems = {
    0:[{ name: "Drumstick", value:0}, { name:"Thigh", value:1 }, { name:"Wing ", value:2 }],
    1:[{ name: "Lamb", value:0}, { name:"Goat ", value:1 }]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <select ng-model="selectedItem" ng-options="Type.value as Type.name for Type in Types">
    <option value="" disabled>Select a type</option>
  </select>
  <select ng-if="subItems[selectedItem].length" ng-model="selectedSubItem" ng-options="item.value as item.name for item in subItems[selectedItem]">
    <option value="" disabled>Select a item</option>
  </select>
  <button type="button" class="btn btn-primary" ng-click="add();" ng-class="isLoading ? 'disabled' : '';">Add
  </button>
</div>

如何在angularjs中创建动态下拉列表

2 个答案: