Question

我正在开发一个应该调用控制器的应用程序，其中有一些函数，因为我从服务器（此时为localhost）收到一个结构如下的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"
  }]

然后我以这种方式在表格中以两个选项打印：

SELECT 1 ： 2016年11月17日，2016年11月18日，2016年11月21日

SELECT 2 ： 09：45,16：50 OR 11：25,12：30 或 16：10,17：25根据第一个选择中的选择

到目前为止，没有任何问题，但现在它应该执行一个将用户的coice发布到服务器的功能，但应用程序不会执行它。

这是我的代码，

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

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

我在控制台中没有错误但功能＆＃34;提交＆＃34;它不会执行。

我该如何解决这个问题？

感谢＆＃39; S

Answer 1

你有几个错误。你需要至少修复这些

在您的控制器上（您需要注入$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);
            });
    };
}

正如我在评论中提到的那样，由于您使用的是controller as方法，因此需要包含ctrl

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

并将您的ng-model变量重命名为

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

功能不在控制器和工厂中执行

1 个答案: