Question

我试图进行分组ui-select，实际上每个ui-select选项都取决于前一个选项。例如，我在第一个UI-select中有一个级别列表，然后根据第一个ui-select选择的项目，第二个ui-select将显示一个位置列表。那可能吗？这是我的代码，但我还没有能够实现它:(

<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]}]

Answer 1

看看这个插件是否适合你：

http://plnkr.co/edit/2kiQ7W?p=preview

相关守则：

<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>

关联的Angular ui-select

1 个答案: