具有单独选定值的多个ui-select

Question

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

            <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属性：当单个选择可以有多个选定值时
• ngModel和ng-repeat / $index：虽然可行，但可能是更新了错误的模型

所以更好的方法是：

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

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

{{ctrl.models | json}}