[英]associated Angular ui-select
我正在嘗試對ui-select進行分組,實際上每個ui-select選項都取決於前一個。 例如,我在第一個UI選擇中有一個級別列表,然后根據選擇的第一個ui選擇,將在第二個ui選擇上顯示一個地方編號列表。 那可能嗎? 這是我的代碼,但是我還無法實現它:(
<div class="SumoSelect sumo_somename" tabindex="0" style="width:80%">
<ui-select search-enabled=false ng-model="levelNumber.selected"
theme="bootstrap" append-to-body="true" on-select="getListPlacePerLevel(levelNumber.selected)">
<ui-select-match placeholder="">{{$select.selected.levelNumber}}</ui-select-match>
<ui-select-choices repeat="item in levels">
<span ng-bind="item.levelNumber"></span> </ui-select-choices> </ui-select>
</div>
<div class="SumoSelect sumo_somename" tabindex="0" style="width:80%; margin-top:20px;">
<ui-select search-enabled=false ng-model="item.selected"
theme="bootstrap" append-to-body="true">
<ui-select-match placeholder="">{{$select.selected.item}}</ui-select-match>
<ui-select-choices repeat="item in levelNumber.selected.listPlaceNumber">
<span ng-bind="item"></span> </ui-select-choices> </ui-select>
</div>
我的Json數據如下
[{"levelNumber":1,"listPlaceNumber":[1,2,3,4,6]},{"levelNumber":2,"listPlaceNumber":[2,4,6,7]},{"levelNumber":3,"listPlaceNumber":[11,12,13,14,16]}]
看看這種小東西是否對您有用:
http://plnkr.co/edit/2kiQ7W?p=預覽
相關代碼:
<div tabindex="0" style="width:80%">
<ui-select search-enabled="false" ng-model="levelNumber.selected" theme="bootstrap" append-to-body="true" on-select="getListPlacePerLevel(levelNumber.selected)">
<ui-select-match placeholder="">{{$select.selected.levelNumber}}</ui-select-match>
<ui-select-choices repeat="item in levels">
<span ng-bind="item.levelNumber"></span>
</ui-select-choices>
</ui-select>
</div>
<div tabindex="0" style="width:80%; margin-top:20px;">
<ui-select search-enabled="false" ng-model="item.selected" theme="bootstrap" append-to-body="true" on-select="getListPlacePerLevel($select.selected)">
<ui-select-match placeholder="">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="item in levelNumber.selected.listPlaceNumber">
<span ng-bind="item"></span>
</ui-select-choices>
</ui-select>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.