所以我需要完全改变一组基于选择一个下拉列表的下拉菜单。我相信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>
单独的下拉列表出现在不同的行中。因此,如果选择iPad,我需要一行显示,如果他们没有选择iPad,则会出现一行。
我会喜欢一些帮助。谢谢!
答案 0 :(得分:2)
您最好的选择是根据父选择设置每个下拉列表。没有必要创建一个重复的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值。这意味着当选择一个选项时,它会自动将ng-model =“event.etype”设置为该选项的值。
要在控制器中支持此行为,您需要提供事件类型数组:
$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,但您可以设置与needeed一样多的数量。正如您所看到的,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>
答案 1 :(得分:0)
在行标记上使用import csv
source = csv.reader(open("denver_source.csv"))
mine = csv.reader(open("denver_mine.csv"))
output = {}
for line in source:
print(line)
for xline in mine:
if line not in xline: continue
output[line] = xline
print(xline)
print("Result", output)
和ng-hide="event.etype == null || event.etype=='ipad'"
解决了我的问题!