angularjs mettre un index à un modèle avec ng-options

Question

J'ai un formulaire avec deux sélections qui sont remplis avec un tableau JSON que j'ai reçu du serveur (localhost en ce moment), dans la première sélection, j'ai 3 jours et dans la seconde j'ai beaucoup de fois ce choix de la journée dans le premier choix, que je devrais poster le choix des deux sélections sur le serveur mais dans ce moment je poste deux objets un pour le jour et un pour le temps donc je veux simplement ajouter dans ng-model un index et le poster sur le serveur pour avoir un moyen simple de gérer ces données.

Ceci est mon code,

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> 

Comment puis-je résoudre ce problème?

Answer 1

Méthode Remercions 1:

Vous pouvez utiliser ng-options="index as value for (index, value) in values

Par exemple:

<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

Méthode 2:

En ng-options vous pouvez utiliser 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>