ng-change with hours和datepicker

Question

我试图点击日期选择器并获取日期以在数据库中执行mysql请求，以便可视化空闲时间。我想我是 没有正确使用ng-change语句。我需要的是，当选择一小时时，日期选择器将更新我在选定时间内可用的小时数。

这是我创建的html文件：

<div class="panel panel-default">
    <div class="panel-heading">
      <p class="panel-title"><span style="color:#5bc0de;" class="glyphicon glyphicon-plus"> </span> Add New cita</p>
    </div>
    <div class="panel-body">
        <form ng-submit="addCita(cita)">


            <div class="form-group">
                <label for="fechaInicio">Fecha de la cita:</label>
                <div class="input-group date fecha">
    <input type="text" name="fechaInicio" class="form-control" id="fechaInicio" ng-model="cita.fechaInicio" ng-click="getHoras(fechaInicio)"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
<script type="text/javascript">
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#fechaInicio").datepicker({
minDate: 0,
firstDay: 1,
dateFormat: 'yy-mm-dd',
});
});
</script>

</div>
<div class="form-group">
<label for="hora" ng-init="getHoras()">Hora:</label>
    <select ng-model="cita.hora">
        <option value="{{cita.hora}}" ng-repeat="cita in citas">
        {{cita.hora}}
        </option>
    </select>
</div>
<div class="form-group">
      <label for="descripcion">Descripcion:</label>
      <input type="text" class="form-control" id="descripcion" ng-model="cita.descripcion">
    </div>
    <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Guardar</button>
    <a href="#/citas" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> Cerrar</a>
</form>
    <div>
<div>

这是我的控制器js：

myApp.controller('empController', function($route,$scope,$http,$routeParams){
    $scope.getCitas = function(){
        $http.get('../api/select.php').then(function(response){
            $scope.citas = response.data;
        });
    };
    $scope.addCita = function(info){
        $http.post('../api/insert.php', info).then(function(response){
            window.location.href = 'http://localhost/webCitas/crud_APM3/client/home.php#/';
        });
    };
    $scope.showCita = function(){
        var idCita = $routeParams.idCita;
        $http.post('../api/selectone.php',{'idCita':idCita}).then(function(response){
            var emp  = response.data;
            $scope.cita = emp[0];
        });
    };
    $scope.updateCita = function(info){
        $http.post('../api/update.php', info).then(function(response){
            window.location.href = 'http://localhost/webCitas/crud_APM3/client/home.php#/';
        });
    };
    $scope.deleteCita = function(idCita){
        var idCita = idCita;
        $http.post('../api/delete.php',{'idCita':idCita}).then(function(response){
            $route.reload();
        });
    };
    $scope.getHoras = function (fechaInicio) {
         // En la llamada pasas fecha de inicio como argumento para el php.
         $http.get('../api/horas.php?='+fechaInicio).then(function (response) {
             $scope.citas = response.data;
         });
     };
    $scope.getCitasPublico = function(){
        $http.get('../api/selectPublico.php').then(function(response){
            $scope.citas = response.data;
        });
    };
});

这里是我的Mysql查询，以获得该日期的空闲时间：

<?php

$data = json_decode(file_get_contents("php://input"));

@session_start();

$id = $_SESSION["user_id"];

$servername = "localhost";

$username = "root";

$password = "root";

$dbname = "pruebas";
// En la variable $date guardas el valor de la fecha de inicio que has elegido
$date = $_REQUEST['fechaInicio'];

$conn = new mysqli($servername, $username, $password, $dbname);

// La llamada a la base de datos la tenías practicamente bien hecha, en fechaInicio le pasas el $date
// que es lo que necesitas para obtener las horas libres que quieres.

$sql = "SELECT hora FROM horas WHERE horaCompleta = 0 AND fechaInicio = $date";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

    // output data of each row

     $data = array() ;

    while($row = $result->fetch_assoc()) {

        $data[] = $row;



    }

} else {

    echo "0 results";

}

echo json_encode($data);
$conn->close();

?>

更新：我尝试使用angular更改日期选择器并将其设置为：

控制器：

myApp.controller('empController', function($route,$scope,$http,$routeParams){
    $scope.getCitas = function(){
        $http.get('../api/select.php').then(function(response){
            $scope.citas = response.data;
        });
    };
    $scope.addCita = function(info){
        $http.post('../api/insert.php', info).then(function(response){
            window.location.href = 'http://localhost/webCitas/crud_APM3/client/home.php#/';
        });
    };
    $scope.showCita = function(){
        var idCita = $routeParams.idCita;
        $http.post('../api/selectone.php',{'idCita':idCita}).then(function(response){
            var emp  = response.data;
            $scope.cita = emp[0];
        });
    };
    $scope.updateCita = function(info){
        $http.post('../api/update.php', info).then(function(response){
            window.location.href = 'http://localhost/webCitas/crud_APM3/client/home.php#/';
        });
    };
    $scope.deleteCita = function(idCita){
        var idCita = idCita;
        $http.post('../api/delete.php',{'idCita':idCita}).then(function(response){
            $route.reload();
        });
    };
    $scope.getHoras = function (fechaInicio) {
         // En la llamada pasas fecha de inicio como argumento para el php.
         $http.get('../api/horas.php?='+fechaInicio).then(function (response) {
             $scope.citas = response.data;
         });
     };
    $scope.getCitasPublico = function(){
        $http.get('../api/selectPublico.php').then(function(response){
            $scope.citas = response.data;
        });
    };
});
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.today = function() {
  $scope.dt = new Date();
};
$scope.today();

$scope.clear = function () {
  $scope.dt = null;
};
});
// Disable weekend selecti

创建html：

i add this to the code:
  <p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="cita.fechaInicio" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>

但不行，因为当我点击选择器不会弹出我失败的地方？ 我使用uib-datepicker