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

【问题标题】：Multiple ui-select with separate selected values具有单独选定值的多个 ui-select
【发布时间】：2015-04-17 11:52:44
【问题描述】：

我已经使用以下内容创建了几个基于服务器数据的 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>

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

【问题讨论】：

你在找这个plnkr.co/edit/95wvJb?p=preview
开始执行此操作：<ui-select name="mandatory" required ng-model="choiceItem.selected">。如果可行，让我们继续。
@Werlang，它不起作用。根据您建议的更改，我是否也需要更改 {{$select.selected.choiceItemDesc}} 中的某些内容？
将所有模型记录到控制台，看看模型是否确实共享相同的值
@Werlang，它有效。请添加您的评论作为答案。

标签： angularjs ui-select angular-ui-select

【解决方案1】：

两件事：

multiple 属性：用于单个选择可以有多个选择值的情况
ngModel 和 ng-repeat/$index：虽然它可以工作，但它可能正在更新错误的模型

所以更好的方法是：

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

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

{{ctrl.models | json}}

【讨论】：