AngularJS ng-options 不工作空 select 框

Question

我正在开发一个应该填充 4 select 个框的应用程序，从 json 通过 $http 指令从一个函数获取，使用 ng-options 和 ng-过滤器指令。

问题是我在控制台中没有错误，但 select 始终为空。

这是应用获取的 json 数组的一部分的示例：

[{"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"}]

这是我的代码：

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

有人可以帮助我吗？

谢谢

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

试试这个。希望对你有用。

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

查看示例 in plunker

AngularJS ng-options 不工作空 select 框

AngularJS ng-options not working empty select boxes

angularjs

angularjs-directive

angularjs-scope

ng-options

angularjs-ng-options