AngularJS select 带有 ng-options

Question

我正在开发一个应用程序，它应该有一个带有 select 框的表单，这些框用 JSON 数组动态填充。

我的问题是控制器已正确执行，但 select 选项不是从控制器填充的，而是空的。

这是我的代码：

<script>
        angular.module('ionicApp', [
        ])
        .controller('TimesController', function () {
            console.log("JavaScript Function");
            var data = <?php echo $json; ?>;
            console.log(data);
            var result = {
              events: [],
              events2: [],
              events3: [],
              schedules: [],
              schedules2: [],
              schedules3: []
            };
            var events = data;
            //console.log("events");
            //console.log(events);
            var events2 = data;
            var events3 = 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);
        })
        </script>

        <div ng-app="ionicApp" ng-controller="TimesController as ctrl">
            <div align="center">
                <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>

有人可以帮我解决吗？

谢谢

Answer 1

angular.module('app', []).controller('MyCtrl', function ($scope) {
  
    $scope.list = [{
        id: 27,
        name: "loruth water point",
        latitude: 4.453488123,
        longitude: 35.36021409
    }, {
        id: 28,
        name: "kibish",
        latitude: 5.286289986,
        longitude: 35.82917452
    }, {
        id: 30,
        name: "Ekalale",
        latitude: 4.434588531,
        longitude: 35.72135923
    }, {
        id: 34,
        name: "karubangorok",
        latitude: 4.506236007,
        longitude: 35.4201746
    }, {
        id: 35,
        name: "nakitoe kakumon",
        latitude: 4.214576564,
        longitude: 35.35912495
    }, {
        id: 36,
        name: "kaikor mission",
        latitude: 4.516645656,
        longitude: 35.42262991
    }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
    <div ng-controller="MyCtrl">
         <h2>List:</h2>
<p>
        <select ng-model="selectedItem" ng-options="item.name for item in list">
            <option value="">-- choose --</option>
        </select>
        
    </p>
        <p>
            <h2>Selected:</h2>
            {{selectedItem.name}}
        </p>
    </div>
</div>

检查这个例子一次。

AngularJS select 带有 ng-options

AngularJS select with ng-options

angularjs

forms

select

ng-options