javascript – 带条件的ng-options中的默认值

2023年4月16日 87次阅读

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

HTML

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

我的JSON如下

《javascript – 带条件的ng-options中的默认值》

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

使用我使用的旧格式：

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

并且工作完美.

但现在我没有选择ng.

所以..有人可以帮助我吗？

谢谢！

//编辑//

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);
    }
}
})();

最佳答案 您将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

点赞