Question

我有多个DropDownList或＆＃34;选项＆＃34;选择。当用户点击＆＃34; Guardar cambios

时，我需要获取每个选项的所有值

这是我的HTML的一部分：

<div class="list">
            <label class="item item-input item-select">
                <div class="input-label">
                    Primer turno
                </div>
                <select>
                    <option ng-repeat="horario in dia.horarios" ng-selected="dia.valorInicio == horario" value="{{horario}}">{{horario}}</option>
                </select>
            </label>
            <label class="item item-input item-select">
                <div class="input-label">
                    Último turno
                </div>
                <select>
                    <option ng-repeat="horario in dia.horarios" ng-selected="dia.valorFin == horario" value="{{horario}}">{{horario}}</option>
                </select>
            </label>
        </div>

结果如下：

有人告诉我，我需要一个模型或类似的东西，但数据是来自我的数据库的json，所以我需要对每个选项使用ng-repeat。

当用户点击＆＃34; Guardar cambios＆＃34;我必须将他选择的每个值发送到我的服务器。

有人知道我是否以正确的方式制作以及如何获得每个选项的所有价值？谢谢！

// // EDIT

现在这是我的观点：

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

这是我的控制器功能＆＃34; guardarHorarioInicial＆＃34;当选项改变时：

(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];

    }

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

    }

}
})();

但控制台显示：

indexxxxxx：0 选项1：未定义

我做错了什么？

Answer 1

您可以在此处使用ng-options代替ng-repeat。这是您的方案的代码示例

  <p>Selected Option 1 : </p>
  <select ng-model="selectedOption1" ng-options="x for x in names">   </select>


  <p>Selected Option 2 : </p>
  <select ng-model="selectedOption2" ng-options="x for x in names">   </select>

  <p>Submit Button</p>
  <button ng-click=submitOptions()>SUBMIT</button>

  <p>Option1 : {{selectedOption1}} </p>
  <p>Option2 : {{selectedOption2}} </p>

javascript控制器看起来像这样

   $scope.names = ["Emil", "Tobias", "Linus"]; 

   $scope.submitOptions = function(){
     console.log("Option 1 : " + $scope.selectedOption1);
     console.log("Option 2 : " + $scope.selectedOption2);
}

它的作用是使用<select>中的选项填充$scope.names个标记。在dia.horarios中，您的案例值为每个<select>被选中的值都绑定到单个模型。选项1中的此处绑定到$scope.selectedOption1。您可以将$scope.selectedOption1和$scope.selectedOption2值用作所选值！

<小时/> 编辑回应
默认选择将不会选择任何选项，我猜这是空值的原因。请尝试以下代码。

<select ng-model="selectedOption1" ng-options="x for x in names" ng-change="changed($index)>

并在控制器中：

$scope.changed = function(index){
    console.log($scope.selectedOption1);
}

未定义的另一个原因可能是控制器上的函数没有使用$ scope。不确定，但这可以根据需要运作。

Answer 2

请按照以下步骤操作，这可能会帮助您解决问题。

请为每个选择框使用ng-change功能，并将所选值推送到一个阵列中，您也可以将ng-change功能放在转发器中。
然后您将所有选定的值放入单个数组中，然后用户单击Guardar cambios，然后调用服务以更新详细信息。

从ng-repeat选项中获取值

2 个答案: