Question

问题很简单：¿如何为ng-options设置初始值？问题是默认值必须是特定值，因为知道我需要条件的具体值是什么。

HTML

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

我的JSON如下

对于每个选项，我需要检查选项的值是否等于valorInicio。如果该选项等于valorInicio的值，我需要默认选择此值

使用我使用的旧格式：

ng-selected="dia.valorInicio == horario"

工作完美。

但是现在我还没有选择。

那么..有人可以帮助我吗？

谢谢！

// // EDIT

HTML

<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="selectedOption1" ng-options="horario for horario in dia.horarios" ng-change="vm.guardarHorarioInicial($index, selectedOption1)">
                </select>
                <!--<select>
                    <option ng-model="selectedOption1" ng-repeat="horario in dia.horarios" ng-selected="dia.valorInicio == horario" ng-change="vm.guardarHorarioInicial($index, selectedOption1)" value="{{horario}}">{{horario}}</option>
                </select>-->
            </label>
            <label class="item item-input item-select">
                <div class="input-label">
                    Último turno
                </div><!--
                <select ng-model="selectedOption2" required="required" ng-init="'09:00'=='09:00'" ng-options="horario as horario for horario in dia.horarios" ng-change="vm.guardarHorarioFinal($index, selectedOption2)"    >
                </select>-->
                <select>
                    <option ng-model="selectedOption2" ng-repeat="horario in dia.horarios" ng-change="vm.guardarHorarioFinal($index, selectedOption2)" ng-selected="dia.valorFin == horario" value="{{horario}}">{{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>

控制器

(function() {
'use strict';

angular
    .module('example.cambiarhorarios')
    .controller('CambiarHorariosController', CambiarHorariosController);

CambiarHorariosController.$inject = ['$state', '$scope', 'cambiarHorariosService'];

function CambiarHorariosController($state, $scope, cambiarHorariosService ) {
    var vm = this;
    vm.estado = false;
    vm.estadoCambiarHorarios = false;
    vm.dias = [];
    vm.mensajeError = '';
    vm.cargarHorarios = cargarHorarios;
    vm.guardarHorarioInicial = guardarHorarioInicial;
    vm.guardarHorarioFinal = guardarHorarioFinal;
    vm.horariosInicial = [];
    vm.horariosFinal = [];


    inicializar();

    function inicializar() {
        cargarHorarios();

    }

    //guardar todos los horarios del primer turno
    function guardarHorarioInicial(index){
        //horariosInicial[index] = 
        console.log("indexxxxxx:"+index);
        console.log("Option 1 : " + $scope.selectedOption1);
        debugger;
        //vm.horarios[index] = vm.test[index];

    }


    function cargarHorarios() {
        vm.estado = false;
        vm.estadoCambiarHorarios = false;
        cambiarHorariosService.obtenerHorariosComplejo()
            .then(function(dias) {
                vm.dias = dias;
                mostrarCambiarHorarios(true);
            })
            .catch(function(e){
                mostrarCambiarHorarios(false);
                vm.mensajeError = e.concat(" Toca para volver a cargar.");
        });
    }

    //funcion para visualizar los datos o mostrar un error
    function mostrarCambiarHorarios(estado){
        if(estado == true){
            vm.estado = true;
        }
        else{
            vm.estado = false;
            vm.estadoCambiarHorarios = true;
        }
    }

    //guardar todos los horarios del primer turno
    function guardarHorarioInicial(index, hora){
        vm.horariosInicial[index] = hora;
        console.log(vm.horariosInicial);
    }

    //guardar todos los horarios del último turno
    function guardarHorarioFinal(index, hora){
        vm.horariosFinal[index] = hora;
        console.log(vm.horariosFinal);
    }
}
})();

Answer 1

您将selectedOption1设置为等于init selected horario。您可以在控制器构造函数中执行此操作，如此伪代码：

if(conditionForInitSelectedObject == horarios[i]){
  $scope.selectedOption1 = horarios[i];        
}

显示代码的额外编辑：

function cargarHorarios() {
    vm.estado = false;
    vm.estadoCambiarHorarios = false;
    cambiarHorariosService.obtenerHorariosComplejo()
        .then(function(dias) {
            vm.dias = dias;

            for(var i = 0; i < dias.horario.length; i++){
               if(dias.horario[i] == dia.valorInicio){
                 $scope.selectedOption1 = dias.horario[i];
               }

               if(dias.horario[i] == dia.valorFin ){
                 $scope.selectedOption2 = dias.horario[i];
               }

            }

            mostrarCambiarHorarios(true);
        })
        .catch(function(e){
            mostrarCambiarHorarios(false);
            vm.mensajeError = e.concat(" Toca para volver a cargar.");
    });
}

修改2

我的私人编辑中数据结构并不清楚，所以问题在于如何根据一些数据初始选择一个数据结构有多种选择。

解决方案1： 如果在选项标签上使用ng-repeat，则可以使用ng-selected

解决方案2： 您可以按我的第一个答案说明，但编辑html以便ngModel不会保存在某些静态变量中，而是：

<select ng-model="dia.Selected" ng-options="horario for horario in dia.horarios" ng-change="vm.guardarHorarioInicial($index, selectedOption1)">

获取数据时的init。这个plunker显示了这个想法：https://plnkr.co/edit/UHasuk0RvYCS8omzlsg4?p=preview

Answer 2

我找到了答案！我必须在ng-model中设置值或（在我的情况下）我想要在默认情况下显示的json属性。

此外，当用户更改选项时，会自动更改json中的值，因为angular会更改您在模型中设置的变量。

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>

感谢@AndersVestergaard帮助我解决我的问题，让我找到答案。

<强>干杯！

带有条件的ng-options中的默认值

2 个答案: