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.

Does replacing `ng-value="{{ userid }}"` with `ng-value="userid"` resolve the issue? — Matthew Cawley, Jan 20 '17 at 13:10
i just tried that and still returns empty unless i write something. but i need it to be hidden also im guessing maybe make something in the controler but i still havent figured out. — Ivan Montes, Jan 20 '17 at 13:18

Matthew Cawley · Accepted Answer · 2017-01-20T16:35:11.270

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

edited Jan 20 '17 at 16:35

answered Jan 20 '17 at 13:26

Matthew Cawley

2,688
1
8
19

i tried this and in theory it should work. and if i write comething it does pass the value but for some reason if i put the value "hidden" doesnt work. im thinking it could be a dependency i need. – Ivan Montes Jan 20 '17 at 14:44
Does it work if you split the text field and the hidden field up? I've updated the answer above as so. - I don't think this makes any difference actually but worth a try. – Matthew Cawley Jan 20 '17 at 15:01
it did the same. it's giving me a empty value. – Ivan Montes Jan 20 '17 at 15:46
Sorry I'm not entirely understanding, what is empty, is it `user` or `userid`? And by "empty" do you mean an empty string `""` or `null` or `undefined`? – Matthew Cawley Jan 20 '17 at 15:49
sorry for the poor explanation. the error handling message is telling me its either empty or is null. when i comment out the if statement `if ($scope.user == "" || $scope.user == null) { error = 1; }` it works but in the database recieve a value of zero on the user id. – Ivan Montes Jan 20 '17 at 15:59
Right okay I understand that part now. Next question, what are you typing in to the `` textbox before clicking the button that triggers `postData()`? – Matthew Cawley Jan 20 '17 at 16:09
that input should be type= hidden but to test the whole controller its type text. im trying to send the userid hidden. But If i write something in that field. it get posted to the database. – Ivan Montes Jan 20 '17 at 16:17
1

The plot thickens, `user` and `userid` are one thing and the same then, only one is a test value for the other. – Matthew Cawley Jan 20 '17 at 16:24
1

Next question: why is it hidden? I get the feeling that it doesn't need to be hidden or have any kind of html form field associated with it at all, it just needs the value passing from one controller to the other (`userIdCtrl` to `appointmentPostCtrl`), correct? – Matthew Cawley Jan 20 '17 at 16:24
You hit right on the money. I did that and worked perfect. I guess that passing the value from the controllers was the answer not hidden via a html field. Thanks a lot!! – Ivan Montes Jan 20 '17 at 17:05
Finally! Yes, I'm not sure angular really has a use for hidden fields because everything happens behind the scenes per se. Pleased it's working anyway, good luck with the rest of the app. – Matthew Cawley Jan 20 '17 at 17:07
Thank you very much for your patience. – Ivan Montes Jan 20 '17 at 17:13

Manikandan Velayutham · Answer 2 · 2017-01-21T14:00:37.207

0

Use this ng-value="userid". We don't need curly braces for ng-value.

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

    $scope.id = id;
    $rootScope.userid = userid; // around the application you can get this id. no more code

};

});

or

<input ng-model="user" ng-value="$parent.userid">

or

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

    $scope.id = id;
   // $scope.userid = userid;
    $scope.$broadcast('userID', userid);

    };
});


app.controller('appointmentPostCtrl', function ($scope, $http) {

$scope.postData = function () {

    $scope.message = "";
    var error = 0;
    $scope.$on('userID', function (event, data) {
    $scope.userid = data;
  });
});

https://docs.angularjs.org/api/ng/directive/ngValue

edited Jan 21 '17 at 14:00

answered Jan 20 '17 at 13:10

Manikandan Velayutham

2,228
1
15
22

im using the user id from another controller to put that value in there. i did this but still return empty unless i write something in there. any idea if in the controller can be something done? im out of ideas. – Ivan Montes Jan 20 '17 at 13:19
use $rootScope. see updated ans. And your user Id update every time or one time? – Manikandan Velayutham Jan 20 '17 at 13:29
i might have been making another mistake here. i just tried all of your options and neither worked for me. the $rootScope throws a error of not being define while the $parent.userid doesnt send the number. i really dont know what is happening. the third option break the operation of the post controller. – Ivan Montes Jan 20 '17 at 14:33
is there and dependency needed to be added? is the ng-value that is not passing the value to the because if i write in the it does pass the value. but i needed to be hidden. – Ivan Montes Jan 20 '17 at 14:35

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

2 Answers2