angularjs помещает индекс в модель с ng-опциями

Question

У меня есть форма с двумя выборами, которые заполнены массивом JSON, который я получил с сервера (localhost в этот момент), в первом select у меня есть 3 дня и во втором у меня много раз, что размах дня выбирается в первом выборе, чем я должен опубликовать выбор двух вариантов на сервере, но в этот момент я отправляю два объекта один на день и один на время поэтому я просто хочу добавить в ng-model индекс, разместив его на сервере, чтобы иметь простой способ управления этими данными.

Это мой код,

script.js:

angular 
    .module('demo', []) 
    .controller('DefaultController', DefaultController) 
    .factory('dataService', dataService); 

DefaultController.$inject = ['dataService', '$http']; 

function DefaultController(dataService, $http) { 
    var vm = this; 

    getEvents(); 

    function getEvents() { 
    return dataService.getEvents() 
     .then(function (data) { 
     vm.data = data; 
     return vm.data; 
     }); 
    } 
    vm.submit = function(){ 
     console.log("funzione"); 
     console.log(vm.form); 
     var data = vm.form; // IMPORTANT 
     //console.clear(); 
     var link = 'http://localhost/api/apiDoFix.php'; 
     var mail = window.localStorage.getItem("mail"); 
     $http.post(link, {ora: data.ora, mail: mail}) 
      .then(function (res){ 
       console.log("Dentro http.post"); 
       var response = res.data; 
       console.log("risposta" + response); 
      }); 
    }; 
} 

dataService.$inject = ['$http']; 

function dataService($http) { 
    var service = { 
    getEvents: getEvents 
    }; 

    return service; 

    function getEvents() { 
    var config = { 
     transformResponse: function (data, headers) { 
     var result = { 
      events: [], 
      schedules: [] 
     }; 
     var events = JSON.parse(data); 
     var dates = []; 
     for (var i = 0; i < events.length; i++) { 
      if (dates.indexOf(events[i].day) === -1) { 
      var date = events[i].day; 
      dates.push(date); 
      result.events.push({ 
       date: date 
      }); 
      } 

      result.schedules.push({ 
      date: events[i].day, 
      time: events[i].time 
      }); 
     } 

     return result; 
     } 
    }; 

    return $http.get('http://localhos/api/apiTimes.php', config) 
     .then(getEventsCompleted) 
     .catch(getEventsFailed); 

    function getEventsCompleted(response) { 
     return response.data; 
    } 

    function getEventsFailed(error) { 
     console.error(error); 
    } 
    } 
} 

form.html:

<div class="list"> 
         <label class="item item-input item-select"> 
          <div class="input-label"> 
           Giorno: 
          </div> 
          <select ng-options="event as event.date for event in ctrl.data.events" ng-model="ctrl.form.giorno"> 
           <option disabled>Seleziona un giorno </option> 
          </select> 
         </label> 
        </div> 
        <div class="list"> 
         <label class="item item-input item-select"> 
          <div class="input-label"> 
           Ora: 
          </div> 
          <select ng-options="schedule as schedule.time for schedule in ctrl.data.schedules | filter: { date: ctrl.form.giorno.date}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno"> 
           <option disabled>Seleziona un orario </option> 
          </select> 

Как я могу решить эту проблему?

Спасибо-х

Answer 1

Метод 1:

Вы можете использовать ng-options="index as value for (index, value) in values

Например:

<div class="list"> 
    <label class="item item-input item-select"> 
     <div class="input-label"> 
      Giorno: 
     </div> 
     <select ng-options="idx as event.date for (idx, event) in ctrl.data.events" ng-model="ctrl.form.giorno"> 
      <option disabled>Seleziona un giorno </option> 
     </select> 
    </label> 
</div> 
<div class="list"> 
    <label class="item item-input item-select"> 
     <div class="input-label"> 
     Ora: 
     </div> 
     <select ng-options="idx as schedule.time for (idx, schedule) in ctrl.data.schedules | filter: { date: ctrl.form.giorno.date}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno"> 
      <option disabled>Seleziona un orario </option> 
     </select> 
    </label> 
</div>  

Here is a fiddle for it

Метод 2:

В ng-options вы можете использовать indexOf

<div class="list"> 
    <label class="item item-input item-select"> 
     <div class="input-label"> 
      Giorno: 
     </div> 
     <select ng-options="ctrl.data.events.indexOf(event) as event.date for event in ctrl.data.events" ng-model="ctrl.form.giorno"> 
      <option disabled>Seleziona un giorno </option> 
     </select> 
    </label> 
</div> 
<div class="list"> 
    <label class="item item-input item-select"> 
     <div class="input-label"> 
     Ora: 
     </div> 
     <select ng-options="ctrl.data.schedules.indexOf(schedule) as schedule.time for schedule in ctrl.data.schedules | filter: { date: ctrl.form.giorno.date}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno"> 
      <option disabled>Seleziona un orario </option> 
     </select> 
    </label> 
</div>