离子/如何从选择控件中选择多个选项（最多只能选择 3 个选项）？答案

【问题标题】：Ionic /How to select multiple options from select control(Maximum selection will 3 options only)?离子/如何从选择控件中选择多个选项（最多只能选择 3 个选项）？
【发布时间】：2015-06-01 05:59:55
【问题描述】：

我目前使用的是 Ionic 1.3.16 版本。这里我需要在我的选择控件中选择多个选项。

这是我的 ionic HTML 代码：

<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
            Lightsaber
        </div>
        <select>
            <option>Blue</option>
            <option selected>Green</option>
            <option>Red</option>
        </select>
    </label>
</div>

【问题讨论】：

在选择时使用multiple 属性和ng-model
使用多个也不起作用...与 ng-model
你能打印相同的ng-model 并检查它是否正在改变值
我正在动态添加选项..使用 ng-repeat

标签： javascript angularjs angularjs-ng-repeat ionic-framework ionic

【解决方案1】：

您在select 选项中缺少value 属性，因为当您选择选项时，它将反映到ng-model。此外，要选择多个，您需要在选择中添加multiple 属性。

标记

<select ng-model="selectedValues" multiple>
    <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>
{{selectedValues}}

【讨论】：

我的代码也一样，但是当我们添加具有多个属性的选择时，它不起作用...
@user3326931 您错过了在选项中添加 value 属性。如果对您有帮助，请点赞。谢谢
如何设置最大多选为3
只有angularjs只需要修复..我不会使用jquery
如果 ui-item 很容易达到某个条件，您可以只使用 angular 来禁用它。只做 ng-disabled:

【解决方案2】：

只需在选择字段中添加multiple 属性即可。

<div class="list">
    <label class="item item-input item-select">
   <div class="input-label">
       Lightsaber
   </div>
   <select multiple="multiple">
        <option>Blue</option>
        <option selected>Green</option>
        <option>Red</option>
   </select>
</label>

【讨论】：

有什么错误吗？因为 multiple 属性为您提供了选择多个选项的选项=
您可能正在浏览器中进行测试，在模拟器中进行测试，这将起作用。虽然远非理想

【解决方案3】：

使用 ng-options 绑定数据，方法如下

在控制器中

$scope.values=  [
   {id:1, name:"value1" }, 
   {id:2, name:"value2" }, 
   {id:3, name:"value3" }
   ];
$scope.selectedValues= []; //initial selections

在视图中

<label class="item item-input item-select">

     <select multiple ng-model='selectedValues'
                    ng-options="a.name for a in values" >
     </select>
</label>
{{selectedValues}} <!-- to preview the selection -->

【讨论】：