我在创建动态下拉列表时遇到问题。我有这个选择选项。
更新
<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",
},
];
创建一个对象数组，例如：
$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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句