How can I use the ng-value to post the id of the user in MySQL

Question

So I'm making an mobile web app and i have a form where they make appointments and save them into MySQL server. I need to send the user id hidden. I have it already in the ng-init. and I have a controller that get it and it can be used to put it in the html. I am no that good at angularjs at all.I mostly use php for everything and few things in javascript. Any help will be apreciated.

this is my form.

<div class="login-form" ng-controller="userIdCtrl" ng-init="init('<? echo $usernameid; ?>','<? echo $usernameid; ?>')">
   <div class="center" style="margin:5px;color:white;">
      <h2>Registro</h2>
      <form role="form" name="registro" ng-controller="appointmentPostCtrl">
         <div class="form-group">
            <div class="col-md-9 col-sm-9 col-xs-9">
               <select ng-model="especialidad" class="styled-select" required>
                  <option value="">Especilidad</option>
                  <?php echo $especialidades ?>
               </select>
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-9 col-sm-9 col-xs-9">
               <select ng-model="facilidad" class="styled-select" required>
                  <option value="">Facilidad</option>
                  <?php echo $facilidades ?>
               </select>
            </div>
         </div>
         <br>
          {{ userid }} <!--- test that it works ----->>>
         <input ng-model="user" ng-value="{{ userid }}"> <!--- actual part that doesn't works it returned empty----->>>
         <input type="date" ng-model="fecha" class="styled-select" style="width:40%; float:left;">
         <input type="time" id="timeInput" name="timeInput" ng-model="hora" placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
         <br><br>
         <div style="margin-top:50px;">
            <button ng-click="postData()" class="button button--large " style="background-color:#6CBA45;">Registrar</button>
            <ons-button modifier="quiet" class="forgot-password" ><a style="text-decoration:none;color:white;" href="login.php">Cancelar</a></ons-button>
            <span id="message">{{ message }}</span>
         </div>
      </form>
   </div>
</div>

Controllers one for the useri id and the other that handles the post to mysql

//////////////////  userIdCtrl Controller  //////////////////////
app.controller('userIdCtrl', function ($scope) {
    $scope.init = function (userid, id) {

        $scope.id = id;
        $scope.userid = userid;

    };
});
//////////// appointment post Controller/////////////////// ////////// ////////// ////////// ////////// ////////// ////////// ////////// ////////// ////////// ////
app.controller('appointmentPostCtrl', function ($scope, $http) {

$scope.postData = function () {

    $scope.message = "";
    var error = 0;

/*---------------- this is the part that is no working return as empty------ */
    if ($scope.user == "" || $scope.user == null) {
        error = 1;
    }
/*--------------------------------------------------------------------- */


    if ($scope.especialidad == "" || $scope.especialidad == null) {
        error = 2;
    }
    if ($scope.facilidad == "" || $scope.facilidad == null) {
        error = 3;
    }
    if ($scope.fecha == "" || $scope.fecha == null) {
        error = 4;
    }
    if ($scope.hora == "" || $scope.hora == null) {
        error = 5;
    }

    /*---- Data is validated ------ */

    if (error == 0) {

        var request = $http({
            method: "post",
            url: "https://www.xxxxxxxx.com/angPost.php",
            data: {
                user: $scope.user,
                especialidad: $scope.especialidad,
                facilidad: $scope.facilidad,
                fecha: $scope.fecha,
                hora: $scope.hora
                },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
            /* Check whether the HTTP Request is Successfull or not. */
            request.success(function (data) {
                $scope.message = "" + data;
            });
        } else {
            $scope.message = "You have Filled Wrong Details! Error: " + error;
        };
    };
});

Am I doing something wrong on the logic of angular or I'm missing a resources? y have tried making only one controller and doesn't work either. this is the closest i can get on the error handle. i think i need a ng route or maybe a service? need some light. thanks.

Answer 1

Firstly remove this from the html markup:

<input ng-model="user" ng-value="{{ userid }}">

Then try wrapping userid in an object on the parent controller:

app.controller('userIdCtrl', function ($scope) {
    $scope.init = function (userid, id) {
        $scope.postObj = {
           id: id
           userid: userid
        };
    };
});

And then change the child controller as follows:

if (error == 0) {

    var request = $http({
        method: "post",
        url: "https://www.ivan-montes.com/websites/MPC_App/php/angPost.php",
        data: {
            user: $scope.postObj.userid, // this line should do it!
            especialidad: $scope.especialidad,
            facilidad: $scope.facilidad,
            fecha: $scope.fecha,
            hora: $scope.hora
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
        /* Check whether the HTTP Request is Successfull or not. */
        request.success(function (data) {
            $scope.message = "" + data;
        });
    } else {
        $scope.message = "You have Filled Wrong Details! Error: " + error;
    };
};