多个 ui-select 具有单独的 selected 值

Question

我使用以下内容根据服务器数据创建了几个 ui-select 下拉菜单。我喜欢 select 每个下拉列表中的独立项目。当我 select 一个下拉列表中的项目时，所有下拉列表都被分配了相同的值。如何分隔 selected 值？

            <div ng-repeat="choiceItem in menuItem.mandatoryChoices">
            <ng-form name="innerModalForm1">
                <div class="form-group">
                    <label ng-show="choiceDescExist(choiceItem)">{{choiceItem.choiceDesc}}</label>

                    <div ng-class="{ 'has-error' : innerModalForm1.option.$invalid && submitted }">
                        <div ng-show="choiceItem.multiSelect">
                            <ui-select name="mandatory" multiple required ng-model="selected.mandatoryChoices[$index]">
                                <ui-select-match placeholder="Please select one or more">
                                    {{$select.selected.choiceItemDesc}}
                                </ui-select-match>
                                <ui-select-choices repeat="s in choiceItem.choiceOptions | filter: $select.search">
                                    <div ng-bind-html="s.choiceItemDesc | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                    <span class="has-error" ng-show="submitted && innerModalForm1.option.$invalid">You must select this required item</span>
                </div>
            </ng-form>
        </div>

这是截图。所有三个下拉菜单都有不同的值集。

Answer 1

两件事：

multiple 属性：当单个 select 可以有多个 selected 值
ngModel 和 ng-repeat/$index：虽然它可以工作，但可能更新了错误的模型

所以更好的方法是：

<ui-select name="mandatory" required ng-model="choiceItem.selected">

此外，当 ng-model 中有一个复杂的表达式时，我喜欢将我的模型输出到 JSON:

{{ctrl.models | json}}

多个 ui-select 具有单独的 selected 值

Multiple ui-select with separate selected values

angularjs

ui-select

angular-ui-select