AngularJS ng-options not working空の選択ボックス

ng-optionsおよびng-filterディレクティブを使用して、$httpディレクティブを使用してjsonから関数を取得する4つの選択ボックスを実装する必要があるアプリケーションを開発しています。AngularJS ng-options not working空の選択ボックス

問題は、コンソールにエラーはありませんが、選択は常に空です。

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

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

誰かが私を助けることができます？

感謝の

出典

2017-07-31 Edoardo

を参照してください。 –

<!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"}, 
 
\t \t \t \t \t ] 
 
\t \t \t \t \t 
 
\t $scope.myfunctn = function(){ 
 
\t console.log($scope.selected) 
 
\t } 
 
\t \t \t \t \t 
 
}); 
 
</script> 
 
</html> \t

出典

2017-07-31 13:52:55

はい、しかし、私の問題は、コントローラからng-optionsディレクティブで他のオプションを取得する必要がありますが、 – Edoardo

がないので、最初の選択は2つのオプションにする必要があります。最初は "Seleziona sede"それはコントローラから取得している "Poser Hairdressing"でなければなりません（質問に書いたjson配列の例） – Edoardo

私の答えを更新しました@Edoardo、 –

これを試してみてください。それがあなたのために働くことを願ってください。

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

はあなたが明示的にNG-オプションを使用してデフォルト値を設定する必要があります例in plunker

出典

2017-08-17 22:40:49

ng-optionでオブジェクトを使用するかどうかを覚えておいてください。オプションリストには常に** track by **句を使用して値を設定してください。 –

AngularJS ng-options not working空の選択ボックス

答えて

関連する問題