Eugen Pahomie Eugen Pahomie - 1 month ago 11
AngularJS Question

Ionic AngularJS scope data value to HTML post

I'm working on Ionic creator with AngularJS v1 in order to build a quote calculator.
All fields have a default value "0", if the user selects a toggle, range, etc.. the value changes and displays with the correct value, but when i'm trying to send the binded value i get the default one "0"
Here is the test URL of the project: https://creator.ionic.io/share/html/2d9b0126751e#/menu/disenoweb

The code i'm using:

function ($scope, $http, $stateParams) {

$scope.seos = [
{ 'value' : 0,
'label' : "NĂºmero palabras"
},
{ 'value' : 200,
'label' : "5 palabras clave"
},
{ 'value' : 400,
'label' : "10 palabras clave"
},
{ 'value' : 800,
'label' : "20 palabras clave"
}
];

$scope.accesos = [
{

'value' : 0,
'label' : "Opciones"


},
{ 'value' : 200,
'label' : "Con panel de usuario"

},
{ 'value' : 50,
'label' : "Sin panel de usuario"

}
];

$scope.data = {
'dominio' : 0,
'alojamiento' : 0,
'logotipo' : 0,
'pagespeed' : 0,
'secciones' : 3,
'galerias' : 0,
'formularios' : 0,
'blogintegrado' : 0,
'catent' : 0,
'categoriasblog' : 0,
'entradasblog' : 0,
'forointegrado' : 0,
'seccionestotal' : 0,
'entradasforo' : 0,
'categoriasforo' : 0,
'mapa' : 0,
'soporte' : 0,
'login' : 0,
'descargadocumentos' : 0,
'hstienda' : 0,
'tiendaint' : 0,
'cattien' : 0,
'prodtien' : 0,
'seo' : $scope.seos[0].value,
'acceso' : $scope.accesos[0].value,
'total' : 0
};
$scope.showdiana = function(){
$scope.show=true;
};

$scope.showemail = function(){
$scope.show=true;
};

$scope.reset = function () {
$scope.data = {
'dominio' : 0,
'alojamiento' : 0,
'logotipo' : 0,
'pagespeed' : 0,
'secciones' : 3,
'galerias' : 0,
'formularios' : 0,
'blogintegrado' : 0,
'catent' : 0,
'categoriasblog' : 0,
'entradasblog' : 0,
'forointegrado' : 0,
'seccionestotal' : 0,
'entradasforo' : 0,
'categoriasforo' : 0,
'mapa' : 0,
'soporte' : 0,
'login' : 0,
'descargadocumentos' : 0,
'hstienda' : 0,
'tiendaint' : 0,
'cattien' : 0,
'prodtien' : 0,
'seo' : $scope.seos[0].value,
'acceso' : $scope.accesos[0].value,
'total' : 0
};

};


$scope.resetblog = function() {

if($scope.data.entradasblog > 0) {
$scope.data.entradasblog = '0';}

else if ($scope.data.categoriasblog > 0) {
$scope.data.categoriasblog = '0';}
};

$scope.resetforo = function() {

if($scope.data.entradasforo > 0) {
$scope.data.entradasforo = '0'; }

else if($scope.data.categoriasforo > 0){
$scope.data.categoriasforo = '0';}

};



var mailgunUrl = "mydomain.com";
var mailgunApiKey = window.btoa("api:key-mykey");
var recipient = "myemail";
var subject = "Quote";
var message = "Test value: " + $scope.data.dominio;

$scope.send = function()
{
$http(

{
"method": "POST",
"url": "https://api.mailgun.net/v3/" + mailgunUrl + "/messages",
"headers": {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Basic " + mailgunApiKey
},
data: "from=" + "app@pixeldraw.eu" + "&to=" + recipient + "&subject=" + subject + "&html=" + message
}
).then(function(success) {
console.log("SUCCESS " + JSON.stringify(success));
}, function(error) {
console.log("ERROR " + JSON.stringify(error));
});
};

}


I'm an AngularJS/Ionic newbie, any help would be apreciated.
Thanks

Answer

I will not write all your code, but this work

<label class="toggle toggle-assertive">
   <input ng-model="data.dominio" type="checkbox" ng-true-value="10" ng-false-value="0">
   <div class="track">
     <div class="handle"></div>
   </div>
 </label>

Controller :

$scope.send = function(){
    var dominio = Number($scope.data.dominio);
    console.log(dominio);
}

Codepen