Edoardo Edoardo - 8 days ago 5
AngularJS Question

function not execute in controller and factory

i'm developing an app that should call a controller where there are some functions, because i receive from a server (localhost in this moment) a JSON array with a structure like this:

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


And then i print it in two selects in a form in this way:

SELECT 1:
17/11/2016, 18/11/2016, 21/11/2016

SELECT 2:
09:45, 16:50 OR 11:25, 12:30 OR 16:10, 17:25 based on the choice in the first select

Up to this point there are no problems but now it should execute a function that post the coice of the user to the server but the app doesn't execute it.

This is my code,

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>


I have no errors in console but the function "submit" it isn't execute.

How can i solve this problem?

Thank's

Answer

You have a couple of errors. You need to fix at least these

On your controller (you will need to inject $http)

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);
            });
    };
}

And in your form as I mention in the comment, since you are using the controller as approach you need to include ctrl

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

And rename your ng-model variables to

ng-model="ctrl.form.ora" //ng-model="data.ora" 
ng-model="ctrl.form.giorno" //ng-model="data.giorno" 
Comments