Question

如果我在同一页面上添加两个选择，则在第一个选择不工作ng-selected时，仅在第二个选择中。如果我在第一个选择中删除

ng-model="opcionSeleccionadaInicio"` ng-change="vm.modificarHoraInicio($index,opcionSeleccionadaInicio)"

ng-selected有效，但我没有任何型号，当用户更改选择时我无法处理。这是我的代码：

<ion-view view-title="Cambiar horarios">
<ion-content>
    <div class="list card" ng-repeat="dia in vm.dias">
        <div class="item item-divider" align="center">
            {{dia.nombre}}
        </div> 
        <div class="list">
            <label class="item item-input item-select">
                <div class="input-label">
                    Primer turno
                </div>
               <select ng-model="opcionSeleccionadaInicio" ng-change="vm.modificarHoraInicio($index,opcionSeleccionadaInicio)"> 
                    <option ng-repeat="horario in dia.horarios" ng-selected="dia.valorInicio == horario">{{horario}}</option> 
                </select>
            </label>
            <label class="item item-input item-select">
                <div class="input-label">
                    Último turno
                </div>
                <select ng-model="opcionSeleccionadaFin" ng-change="vm.modificarHoraFin($index,opcionSeleccionadaFin)"> 
                    <option ng-selected="dia.valorFin == horario"  ng-repeat="horario in dia.horarios" >{{horario}}</option> 
                </select>
            </label>
        </div>
    </div>
    <div class="padding-horizontal"><button class="button button-block button-positive" ng-click="vm.guardarHorarios()"> Guardar horarios </button></div>
</ion-content>
</ion-view>

第一个选择显示选项，但不选择默认值，如第二个选择。

感谢大家的帮助！

Answer 1

我看了你的代码，我们可以使用两个ng-selected，只是设置它们的值不同。

首先：<option ng-repeat="horario in dia.horarios" ng-selected="dia.valorInicio == horario">{{horario}}</option>

第二名：<option ng-selected="dia.valorFin == horario" ng-repeat="horario in dia.horarios" >{{horario}}</option>

点击此链接获取进一步的帮助：

https://plnkr.co/edit/3aH1dlJD43HUU2ZBuMXU?p=preview

Answer 2

我发现了问题！无需定义ng-selected，只需定义具有要修改的值的ng-model。此选项默认情况下也会选择模型的值。

这是我的最终代码：

<ion-view view-title="Cambiar horarios">
    <ion-content>
        <div class="list card" ng-repeat="dia in vm.dias">
            <div class="item item-divider" align="center">
                {{dia.nombre}}
            </div> 
            <div class="list">
                <label class="item item-input item-select">
                    <div class="input-label">
                        Primer turno
                    </div>
                   <select ng-model="dia.valorInicio" ng-change="vm.modificarHoraInicio($index,dia.valorInicio)"> 
                        <option ng-repeat="horario in dia.horarios">{{horario}}</option> 
                    </select>
                </label>
                <label class="item item-input item-select">
                    <div class="input-label">
                        Último turno
                    </div>
                    <select ng-model="dia.valorFin" ng-change="vm.modificarHoraFin($index,dia.valorInicio)"> 
                        <option ng-repeat="horario in dia.horarios" >{{horario}}</option> 
                    </select>
                </label>
            </div>
        </div>
        <div class="padding-horizontal"><button class="button button-block button-positive" ng-click="vm.guardarHorarios()"> Guardar horarios </button></div>
    </ion-content>
</ion-view>

//编辑//

此外，如果有人使用ng-options是相同的：

<select ng-model="dia.valorInicio" ng-options="horario for horario in dia.horarios" ng-change="vm.modificarHoraInicio($index, dia.valorInicio)"></select>

<select ng-model="dia.valorFin" ng-options="horario for horario in dia.horarios" ng-change="vm.modificarHoraFin($index, dia.valorFin)"></select>

<强>干杯！

何时在同一页面上选择两个（第二个）

2 个答案: