AngularJS使用ng-options进行选择

Question

我正在开发一个应用程序，该应用程序应该有一个表单，其中包含使用 JSON 数组动态填充的选择框。

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

这个ID我的代码：

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

检查一次此示例。