AngularJS ng-options不起作用空白选择框

Question

i'm developing an app that should have 4 select boxes populated, from json getting from a function through the $http directive, with the ng-options and ng-filter directive.

The problem is that i've no errors in the console but the select is always empty.

This is an example of a portion of json array that the app getting of:

[{"sede":"Poser Hairdressing","professionista":"Lavorante  2","day":"2017-07-31","time":"15:00"},{"sede":"Poser Hairdressing","professionista":"Lavorante  2","day":"2017-07-31","time":"15:30"}]

And this is my code:

 var app = angular.module("myApp", []); app.controller("myCtrl", function($http, $scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; console.log("JavaScript Function"); var firstName = "John"; var lastName = "Doe"; $scope.submit = function() { console.log("Submit"); } var attivita = <?php echo json_encode($cod_attivita); ?>; var config = { transformResponse: function (data, headers) { var result = { events: [], events2: [], events3: [], schedules: [], schedules2: [], schedules3: [] }; console.log(data); var events = JSON.parse(data); console.log(events); var events2 = JSON.parse(data); var events3 = JSON.parse(data); var dates = []; var sedi = []; var professionisti = []; console.log("qua3"); 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 }); } if (sedi.indexOf(events[i].sede) === -1) { var sede = events[i].sede; sedi.push(sede); result.events2.push({ sede: sede }); } if (professionisti.indexOf(events[i].professionista) === -1) { var professionista = events[i].professionista; professionisti.push(professionista); result.events3.push({ professionista: professionista }); } var a = 0; var found = false; while (a < result.schedules2.length) { if (events[i].sede === result.schedules2[a].sede && events[i].professionista === result.schedules2[a].professionista) { found = true; } a++; } if (found == false) { result.schedules2.push({ sede: events[i].sede, professionista: events[i].professionista }); } var a = 0; var found = false; while (a < result.schedules3.length) { if (events[i].sede === result.schedules3[a].sede && events[i].professionista === result.schedules3[a].professionista && events[i].day === result.schedules3[a].date) { found = true; } a++; } if (found == false) { console.log("OLEE"); result.schedules3.push({ sede: events[i].sede, professionista: events[i].professionista, date: events[i].day }); } result.schedules.push({ sede: events[i].sede, professionista: events[i].professionista, date: events[i].day, time: events[i].time //console.log("qua4"); }); } console.log(result); return result; } }; var email = "assistenza@pgdue.com"; var link = 'http://sviluppo.pgdue.com/shuttle/admin/app-service/get-orari?e='+email+"&attivita="+attivita; console.log(link); return $http.get(link, config) .then(getEventsCompleted) .catch(getEventsFailed); function getEventsCompleted(response) { console.log(response.data); return response.data; console.log(response.data); } function getEventsFailed(error) { console.error(error); } }); 

 <div ng-app="App"> <div align="center" ng-controller="TimesController as ctrl"> <p style="font-size: 22px;">Inserisci appuntamento</p> <br> <div class="list" align="center"> <div class="input-label"> </div> <select style="width: 75%;" ng-options="event as event.sede for event in ctrl.data.events2" ng-model="ctrl.form.sede"> <option value="" disabled>Seleziona sede</option> </select> </div><br> <div class="list" align="center"> <div class="input-label"> </div> <select style="width: 75%;" ng-options="schedule as schedule.professionista for schedule in ctrl.data.schedules2| filter: { sede: ctrl.form.sede.sede}" ng-model="ctrl.form.professionista" ng-disabled="!ctrl.form.sede"> <option value="" disabled>Seleziona professionista</option> </select> </div><br> <div class="list" align="center"> <div class="input-label"> </div> <select style="width: 75%;" ng-options="schedule as schedule.date for schedule in ctrl.data.schedules3| filter: { professionista: ctrl.form.professionista.professionista, sede: ctrl.form.sede.sede}" ng-model="ctrl.form.giorno" ng-disabled="!ctrl.form.professionista"> <option value="" disabled>Seleziona giorno</option> </select> </div><br> <div class="list" align="center"> <div class="input-label"> </div> <select style="width: 75%;" ng-options="schedule as schedule.time for schedule in ctrl.data.schedules| filter: { date: ctrl.form.giorno.date, professionista: ctrl.form.professionista.professionista, sede: ctrl.form.sede.sede}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno"> <option value="" disabled>Seleziona orario</option> </select> </div><br> </div> </div> <br> <div align="right"> <button ng-click="ctrl.submit()"><p>Prenota</p></button> </div> <!-- begin snippet: js hide: false console: true babel: false --> 

Can someone help me?

Thank's

Answer 1

 <!DOCTYPE html> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-options="event as event.sede for event in option1" ng-model="selected" ng-change="myfunctn()"> <option value="" disabled>Seleziona sede</option> </select> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.option1 = [{"sede":"Poser Hairdressing","professionista":"Lavorante 2","day":"2017-07-31","time":"15:00"}, ] $scope.myfunctn = function(){ console.log($scope.selected) } }); </script> </html> 

Answer 2

Try this. hope it will work for you.

    <select 
      ng-options="x as x.sede for x in option1 track by x.sede"
      ng-model="selected" 
      ng-change="myfunctn()">
       <option value="" >Seleziona sede</option>
     </select>

see example in plunker