2016-11-25 6 views
0

私はサーバー(現時点ではローカルホスト)から次のような構造のJSON配列を受け取るため、いくつかの機能があるコントローラを呼び出すアプリケーションを開発しています:関数はコントローラと工場では実行されません

[{ 
    "day": "17/11/2016", 
    "time": "09:45" 
    }, { 
    "day": "17/11/2016", 
    "time": "16:50" 
    }, { 
    "day": "18/11/2016", 
    "time": "11:25" 
    }, { 
    "day": "18/11/2016", 
    "time": "12:30" 
    }, { 
    "day": "21/11/2016", 
    "time": "16:10" 
    }, { 
    "day": "21/11/2016", 
    "time": "17:25" 
    }] 

そして私はこのようにフォームに2つの選択でそれを印刷:

を選択: 17/11/2016、18/11/2016を21/11/2016

SELECT 2: 最初の選択に基づいて9時45分、夜04時50分OR 11時25分、12時30 OR 16:10、午後05時25分がこれまで

を選択問題はありませんが、ユーザーのコイスをサーバーにポストする機能を実行する必要がありますが、アプリケーションはそれを実行しません。

これは私のコードで、

SCRIPT.JS

angular 
    .module('demo', []) 
    .controller('DefaultController', DefaultController) 
    .factory('dataService', dataService); 

DefaultController.$inject = ['dataService']; 

function DefaultController(dataService) { 
    var vm = this; 

    getEvents(); 

    function getEvents() { 
    return dataService.getEvents() 
     .then(function (data) { 
     vm.data = data; 
     return vm.data; 
     }); 
    } 
} 

dataService.$inject = ['$http']; 

function dataService($http) { 
    var service = { 
    getEvents: getEvents 
    }; 

    return service; 

    function getEvents() { 
    var config = { 
     transformResponse: function (data, headers) { 
     var result = { 
      events: [], 
      schedules: [] 
     }; 
     var events = JSON.parse(data); 
     var dates = []; 
     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 
      }); 
      } 

      result.schedules.push({ 
      date: events[i].day, 
      time: events[i].time 
      }); 
     } 

     return result; 
     } 
    }; 

    return $http.get('http://<path>/api/apiTimes.php', config) 
     .then(getEventsCompleted) 
     .catch(getEventsFailed); 

    function getEventsCompleted(response) { 
     return response.data; 
    } 

    function getEventsFailed(error) { 
     console.error(error); 
    } 
    } 
} 
console.log("fine"); 

function submit ($http){ 
    console.log("funzione"); 
    var data = {}; 
    console.clear(); 
    var link = 'http://<path>/api/apiFix.php'; 
    var mail = window.localStorage.getItem("mail"); 
    $http.post(link, {giorno: data.giorno, ora: data.ora, mail: mail}) 
     .then(function (res){ 
      console.log("Dentro http.post"); 
      var response = res.data; 
      console.log(response); 
     }); 
} 

FORMのHTML

<body ng-app="demo" ng-controller="DefaultController as ctrl"> 
       <form ng-submit="submit()"> 
        <div class="list"> 
         <label class="item item-input item-select"> 
          <div class="input-label"> 
           Giorno: 
          </div> 
          <select ng-options="event as event.date for event in ctrl.data.events" ng-model="data.giorno"> 
           <option disabled>Seleziona un giorno </option> 
          </select> 
         </label> 
        </div> 
        <div class="list"> 
         <label class="item item-input item-select"> 
          <div class="input-label"> 
           Ora: 
          </div> 
          <select ng-options="schedule as schedule.time for schedule in ctrl.data.schedules | filter: { date: data.giorno.date}" ng-model="data.ora" ng-disabled="!data.giorno"> 
           <option disabled>Seleziona un orario </option> 
          </select> 
         </label> 
        </div> 
       </div> 
      </div><br> 
      <ul class="list"> 
       <li class="item item-toggle"> 
        &Egrave un'urgenza? 
        <label class="toggle toggle-assertive"> 
         <input type="checkbox"> 
         <div class="track"> 
          <div class="handle"></div> 
         </div> 
        </label> 
       </li> 
      </ul> 
      <div align="center"> 
       <input class="button button-calm" type="submit" name="submit" value="Prenota !">    
      </div> 
     </form> 
    </body> 

私は、コンソールにエラーを持っていないが、関数は、それを "提出"実行されていません。

どのように私はこの問題を解決することができますか?

ありがとうございました

+0

submitがコントローラになく、ctrl.submit()として使用する必要があります。 – taguenizy

+0

ありがとう、どうすればこの関数を呼び出すことができますか? @ taguenizy – Edoardo

+0

私が検出した3つのエラーの回答を提出しました。あなたがそれ以上の問題を抱えている場合は、私に知らせてください – taguenizy

答えて

0

あなたにはいくつかのエラーがあります。あなたは、あなたがする必要があるcontroller asアプローチを使用しているので、私は、コメントで言及のようにして、

DefaultController.$inject = ['dataService', '$http']; 

function DefaultController(dataService, $http) { 
    var vm = this; 
    vm.submit = function(){ 
     console.log("funzione"); 
     var data = vm.form; // IMPORTANT 
     console.clear(); 
     var link = 'http://<path>/api/apiFix.php'; 
     var mail = window.localStorage.getItem("mail"); 
     $http.post(link, {giorno: data.giorno, ora: data.ora, mail: mail}) 
      .then(function (res){ 
       console.log("Dentro http.post"); 
       var response = res.data; 
       console.log(response); 
      }); 
    }; 
} 

そして、あなたの形で(あなたが$httpを注入する必要があります)あなたのコントローラでは、少なくともこれらの

を修正する必要がありますctrl

<form ng-submit="ctrl.submit()"> 

が含まれており、

にご ng-model変数の名前を変更0
+0

ありがとう、それは動作しますが、今私は別の質問を、どのようにサーバーに選択の選択を送信することができますか?私のコードではすべての可能な選択を投稿します – Edoardo

+0

これは 'ng-model'に反映されています。これは、何かが選択されていれば、送信時に 'vm.data'になければなりません。あなたは詳細を提供することができます – taguenizy

+0

私は昼と時間を選択してそれをテストし、サーバーからアプリケーション(応答)に何を受け取ったのか、コンソールの結果は、私は2つの選択すべてのデータを持っている – Edoardo

関連する問題