从ng-repeat选项获取值

Question

我有多个DropDownList或“选项”来选择。我需要得到每个选项的所有值当“和保存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为每个选项

当用户点击“Guardar cambios”时，我必须向我的服务器发送他选择的每个值。

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

// //编辑

现在，这是我的看法：

<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> 

这是我与功能 “guardarHorarioInicial” 当选项更改控制器：

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

的另一个原因是不确定的可能是不使用$范围控制器上的功能。不知道肯定，但这需要工作。