i need to get an id from the url, and display it to the input.
When i try to get it in the input, they tell me they give me this error:
"Required Integer parameter 'idpatient' is not present."
this is my html page and table from where i get the id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tous les patients</title>
<meta charset="utf-8" content="text/html" X-Content-Type-Options="nosniff" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
th:href="#{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
th:href="#{/css/myStyle.css}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="ListePatientController">
<div class="container">
<form>
<label>Mot clé:</label>
<input type="text" ng-model="motCle"/>
<Button ng-click="charger()">Chercher un patient</Button>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Sexe</th>
<th>Date de naissance</th>
<th>Nationalité</th>
<th>CIN</th>
<th>CNE</th>
<th>Type de couverture</th>
<th>Num° du type de couverture</th>
<th>Province</th>
<th>Résident</th>
<th>Adresse personnelle du patient</th>
<th>Adresse parents du patient</th>
<th>GSM</th>
<th>Adresse électronique</th>
<th>Pratiquer un sport</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in patients.content">
<td>{{p.idPatient}}</td>
<td>{{p.nomPatient}}</td>
<td>{{p.prenomPatient}}</td>
<td>{{p.sexe}}</td>
<td>{{p.dateNaiss|date:'dd/MM/yyyy'}}</td>
<td>{{p.nationalite}}</td>
<td>{{p.cin}}</td>
<td>{{p.cne}}</td>
<td>{{p.typeCouverture}}</td>
<td>{{p.numTypeCouverture}}</td>
<td>{{p.province}}</td>
<td>{{p.resident}}</td>
<td>{{p.adressPerso}}</td>
<td>{{p.adressPatient}}</td>
<td>{{p.gsmPatient}}</td>
<td>{{p.mailPatient}}</td>
<td>{{p.pratiquePatient}}</td>
<td>
ajout consult
</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<ul class="nav nav-pills">
<li ng-class="{active:$index==pageCourante}" class="clickable" ng-repeat="p in pages track by $index">
<a ng-click="gotoPage($index)">{{$index}}</a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</body>
</html>
This is the html page when i should display it in the input :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inscription d'une consultation</title>
<meta charset="utf-8" content="text/html" X-Content-Type-Options="nosniff" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"
th:href="#{/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css"
th:href="#{/css/myStyle.css}"/>
</head>
<body ng-app="myApp" ng-controller="inscriptionConsultationController">
<div class="col-md-6 col-sm-6 col-xs-12 container">
<div class="panel panel-success container spacer ">
<div class="panel-heading"><b><h1>Ajout d'une consultation</h1></b></div>
<div class="panel-body">
<div ng-if="mode.value=='form'" >
<form>
<div class="form-group">
<label class="control-label">Date de la consultation:</label>
<input class="form-control" type="date" ng-model="consultation.dateConsult"/>
<span ng-if="errors" class="error">{{errors.dateConsultt}}</span>
</div>
<div class="form-group">
<label class="control-label">Type de la consultation:</label>
<input class="form-control" type="text" ng-model="consultation.typeConsult"/>
<span ng-if="errors" class="error">{{errors.typeConsult}}</span>
</div>
<div class="form-group">
<label class="control-label">Motif(s):</label>
<input class="form-control" type="text" ng-model="consultation.motifConsult"/>
<span ng-if="errors" class="error">{{errors.motifConsult}}</span>
</div>
<div class="form-group">
<label class="control-label">Dignostics:</label>
<input class="form-control" type="text" ng-model="consultation.diagnostic"/>
<span ng-if="errors" class="error">{{errors.diagnostic}}</span>
</div>
<div class="form-group">
<label class="control-label">Maladie chronique?</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="consultation.maladieChronique">Oui</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="consultation.maladieChronique">Non</label>
</div>
<span ng-if="errors" class="error">{{errors.maladieChronique}}</span>
</div>
<div class="form-group">
<label class="control-label">Décision:</label>
<input class="form-control" type="text" ng-model="consultation.decision"/>
<span ng-if="errors" class="error">{{errors.decision}}</span>
</div>
<div class="form-group">
<input type = "number" ng-model="consultation.idPatient" value="idpatient"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="saveConsultation()"> Enregistrer</button>
</div>
</form>
</div>
<div ng-if="mode.value=='confirm'">
<div class="panel-heading container spacer"><h2>Confirmation: La consultation a été ajoutée avec succès!</h2></div>
<div class="form-group">
<label class="control-label">ID:</label>
<label class="control-label">{{consultation.idConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Date de la consultation:</label>
<label class="control-label">{{consultation.dateConsult|date:'yyyy-MM-dd'}}</label>
</div>
<div class="form-group">
<label class="control-label">Type de la consultation:</label>
<label class="control-label">{{consultation.typeConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Motif(s):</label>
<label class="control-label">{{consultation.motifConsult}}</label>
</div>
<div class="form-group">
<label class="control-label">Diagnostics:</label>
<label class="control-label">{{consultation.diagnostic}}</label>
</div>
<div class="form-group">
<label class="control-label">Maladie chronique?</label>
<label class="control-label">{{consultation.maladieChronique}}</label>
</div>
<div class="form-group">
<label class="control-label">consultation:</label>
<label class="control-label">{{consultation.decision}}</label>
</div>
<div class="form-group">
<label class="control-label">id patient:</label>
<label class="control-label">{{consultation.idPatient}}</label>
</div>
</div>
<div ng-if="exception">
<span class="error">{{exception.message}}</span>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</body>
</html>
This is the Spring service that gets the id :
#RequestMapping(value="/consultations",method=RequestMethod.POST)
public Object saveConsultation(#RequestParam (value = "idpatient", required = true) String idpatient,
#RequestBody #Valid Consultation c,
BindingResult bindingResult){
if(bindingResult.hasErrors()){
Map<String, Object> errors=new HashMap<>();
errors.put("errors", true);
for(FieldError fe: bindingResult.getFieldErrors()){
errors.put(fe.getField(), fe.getDefaultMessage());
}
return errors;
}
return consultationMetier.saveConsultation(idpatient,c,bindingResult);
}
You can not use it directly, you need share data for two controller in service level.
See - AngularJS - Passing data between pages for details.
Related
I cant seem to make this work. I wanted a simple responsive login page but the form doesn't stay on the center, it keeps going to the left.
Why this is not working?? If I divide the col into 3 sections of 4, should the it stay on the middle?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="margin-top:150px">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
I've added a class named col-centered. You can see an example below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered">
<div class="jumbotron">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
How can I add a label to my checkbox's so that I can have them inline.
I am wanting it like this:
label input input
Currently the code below is showing like input input label why?
HTML:
<div class="col-md-6 pull-right">
<div class="form-group">
<label>Gender</label> <label class=
"col-sm-2 checkbox-inline"><input id="genMale" type="checkbox"
value="genMale">Male</label> <label class=
"col-sm-2 checkbox-inline"><input id="genFemale" type=
"checkbox" value="genFemale">Female</label>
</div>
</div>
The gender label is not within the grid. Add the class col-sm-2 to the label.
<label class="col-sm-2">Gender</label>
Here's a snippet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-md-6 pull-right">
<div class="form-group">
<label class="col-sm-2">Gender</label>
<label class="col-sm-2 checkbox-inline">
<input id="genMale" type="checkbox" value="genMale">Male</label>
<label class="col-sm-2 checkbox-inline">
<input id="genFemale" type="checkbox" value="genFemale">Female</label>
</div>
</div>
You can do like. I think this will perfectly work for you.
Happy Coding :-) ;-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Inline Check Box</h2>
<form class="form-inline" role="form">
<div class="checkbox">
<label>Gender</label>
</div>
<div class="checkbox">
<label> Male <input type="checkbox"></label>
</div>
<div class="checkbox">
<label> Female <input type="checkbox"></label>
</div>
</form>
</div>
</body>
</html>
is this is what you need ? Or am i wrong ?
You had the pull right, i deleted it
<div class="col-md-6">
You can try this.
<label style="float:left;margin-right:15px;">Gender</label>
You can also try this....
<label class="pull-left">Gender</label>
MB You mean something like this?
<div class="col-md-6 pull-right">
<div class="form-group">
<label>Gender</label> <br><br>
<input id="genMale" type="checkbox" value="genMale" name="male">
<label for="male" class="col-sm-2 checkbox-inline">Male</label>
<input id="genFemale" type="checkbox" value="genFemale" name="Female">
<label for="Female" class="col-sm-2 checkbox-inline">Female</label>
</div>
When i include the CodeIgniter library on my website
I have this :
SEE THE PROBLEM HERE
A blank after the body tag
This is caused by the recaptcha library , because when i have removed it , the blank have disappeared
Need some help ;)
My code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Razal</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<META NAME="description" CONTENT="Serveur privé Dofus 1.29.1">
<META NAME="author" CONTENT="Ichiga">
<link href="https://www.razal.eu/style/css/style_v13.css" rel="stylesheet" type="text/css" />
<link href="https://www.razal.eu/style/css/pure-min.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
if (top.location!= self.location)
{
top.location = self.location.href
}
function ToogleMobileMenu()
{
document.getElementById("div-left").classList.toggle('div-left-open');
}
function UpdateMinViewIpad()
{
var viewportmeta = document.querySelector('meta[name="viewport"]');
if(window.innerHeight > window.innerWidth) {viewportmeta.content = 'width=device-width';}
else{viewportmeta.content = 'width=device-height';}
}
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
{
UpdateMinViewIpad();
document.addEventListener('orientationchange', function ()
{
UpdateMinViewIpad();
}, false);
}
//-->
</script>
</head>
<body>
<div class="div-header">
<div class="div-header-content">
</div>
<div class="div-bar-menu">
<div class="div-menu">
<img src="https://www.razal.eu/style/img/menu_separator.png">
Accueil
<img src="https://www.razal.eu/style/img/menu_separator.png">
Rejoindre Razal
<img src="https://www.razal.eu/style/img/menu_separator.png">
Classements
<img src="https://www.razal.eu/style/img/menu_separator.png">
Forum
<img src="https://www.razal.eu/style/img/menu_separator.png">
<a onclick="alert('à venir')" href="#">Vidéos</a>
<img src="https://www.razal.eu/style/img/menu_separator.png">
</div>
</div>
</div>
<div class="div-content">
<div id="div-left" class="div-left">
<div class="div-floater-menu" onclick="ToogleMobileMenu();">
<img src="images/floatter-menu.png" alt="menu">
</div>
<div class="div-box">
<button class="pure-button pure-button-active" style="width:100%;" id="vote">Créer un compte</button>
</div>
<div class="div-box">
<legend>Connexion</legend>
<hr>
<form action="https://www.razal.eu/utilisateur/connexion" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="username" type="text" name="username" placeholder="Nom de compte">
</div>
<label for="password">Mot de passe</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="password" type="password" name="password" placeholder="Mot de passe">
</div>
<button type="submit" class="pure-button pure-button-primary">se connecter</button>
</fieldset>
</div>
</form>
</div>
<div class="div-box">
<legend>Voter</legend>
<img style="width:100%" src="https://www.razal.eu/style/img/rpg.png">
</div>
</div>
<div class="div-page">
<div class="div-box">
<h2>Formulaire d'inscription</h2>
<hr class="hrtitle" />
<div class="pure-u-1-4">
</div>
<div class="pure-u-1-3">
<form action="https://www.razal.eu/utilisateur/inscription" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="username" name="username" type="text">
<label for="email">Adresse e-mail</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="email" name="email" type="email">
<label for="nickname">Pseudo</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="nickname" name="nickname" type="text">
<label for="password">Mot de passe</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="password" type="password">
<label for="password">Confirmation MDP</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="passwordconfirm" type="password" >
<p><div class="g-recaptcha" data-sitekey="6LfDgB0TAAAAANw_dSy0Pd-ezJMRTko_UHmpcm6R"></div>
<script src="https://www.google.com/recaptcha/api.js?hl=fr" async defer></script></p>
<button type="submit" class="pure-button pure-button-primary">S'inscrire</button>
</fieldset>
</div>
</form>
</div>
</div>
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
entity looks like a result of including files saved in UTF-8 with BOM.
I suggest to check for files encoding, maybe if you are working with different conflicting formats.
In this code, i want to remove remove extra spaces (shown in the image) and also the drop down list is showing in the wrong position(it should be exactly below the list).I just use this single flie.what modifications are needed to resolve this?Please suggest.please let me know for further information.Thanks.
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Joining Information</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 2px;
}
</style>
</head>
<body>
<h1>Employee Joining Information Form</h1>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<label type="text" class="control-label col-xs-2">Employee ID</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="eid">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="nm">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Designation</label>
<div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Choose Designation <span class="caret"></span></button>
<ul class="dropdown-menu">
<li >Manager</li>
<li >Officer</li>
<li >Receptionist</li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
The problem was your dropdown needed to be wrapped inside <div class="col-xs-5"></div>
.bs-example{
margin: 2px;
}
label.control-label.col-xs-2 {
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Joining Information</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Employee Joining Information Form</h1>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<label type="text" class="control-label col-xs-2">Employee ID</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="eid">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id="nm">
</div>
</div>
<div class="form-group">
<label type="text" class="control-label col-xs-2">Designation</label>
<div class="col-xs-5">
<div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Choose Designation <span class="caret"></span></button>
<ul class="dropdown-menu">
<li >Manager</li>
<li >Officer</li>
<li >Receptionist</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I got an app which i use from CodePen but i cant use expressions in this way {{Expression}}
i need to use it on this way [[]]
here is the code for the app
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sistema de Alarmas Ever-Track</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://staticmapmaker.com/css/main.css'>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<body ng-app="myApp">
[[1+3+"QUE FUCKING PEDO OSEA"]]
<input type="checkbox" class="toggle" id="toggle">
<header class="col col-right">
<h1><i class="fa fa-map-marker"></i> Ever-Track GPS System </h1>
Sistema de rastreo de Alarmas
</header>
<div class="main" ng-controller="controller">
<div class="col-left col">
<label for="toggle" class="label-toggle">
<span class="close-it"><span class="fa fa-arrow-circle-left"></span></span>
<span class="open-it"><span class="fa fa-arrow-circle-right"></span></span>
</label>
<div class="controls">
<div class="container" >
<form>
<fieldset ng-show="false">
<div class="form-group">
<label for="location" class="cushion">Location <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.locationAbout]]"></i></label>
<div class="form-control" ><input type="text" ng-model="e.location" id="location"></div>
</div>
<div class="form-group">
<label for="api" class="cushion">
API Key
<i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.APIAbout]]"></i></label>
<div class="form-control"><input type="text" ng-model="e.API" id="api" placeholder="API Key"></div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="zoom">Zoom</label>
<div class="form-control"><input type="range" name="input" ng-model="e.zoom" min="[[e.minZoom]]" max="[[e.maxZoom]]" id="zoom"></div>
</div>
<div class="form-group">
<label for="scale">Scale (2x) <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.scaleAbout]]"></i>
</label>
<div class="form-control"><input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'"></div>
</div>
<div class="form-group">
<label for="width" class="cushion">Ancho <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i></label>
<div class="form-control"><input type="number" ng-model="e.width" min="0" max="[[e.maxSize]]" id="width"></div>
</div>
<div class="form-group">
<label for="height" class="cushion">Alto <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i>
</label>
<div class="form-control"><input type="number" ng-model="e.height" min="0" max="[[e.maxSize]]" id="height"></div>
</div>
</fieldset>
<fieldset ng-show="false">
<div class="form-group">
<label for="showMarker">Map Marker</label>
<div class="form-control"><input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker"></div>
</div>
<ng-switch on="showMarker">
<ng-switch ng-switch-when="true">
<div class="form-group">
<label for="markerColor"> Marker Color</label>
<div class="form-control"><select ng-model="e.markerColor"
ng-options="color for color in colors" id="markerColor">
</select></div>
</div>
<div class="form-group">
<label for="markerSize"> Marker Size</label>
<div class="form-control"><select ng-model="e.markerSize"
ng-options="markerSize.value as markerSize.text for markerSize in markerSizes" id="markerSize">
</select></div>
</div>
</ng-switch>
</ng-switch>
</fieldset>
<fieldset>
<div class="form-group">
<label for="mapType"> Tipo de Mapa</label>
<div class="form-control"><select ng-model="e.mapType"
ng-options="mapType for mapType in mapTypes" id="mapType">
</select></div>
</div>
<div class="form-group">
<label for="format"> Formato imagen</label>
<div class="form-control"><select ng-model="e.format"
ng-options="format for format in formats" id="format">
</select></div>
</div>
<div class="form-group">
<label for="visual"> Efecto Virtual</label>
<div class="form-control"><input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual"></div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-right col">
<div class="static">
<img ng-src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[$route.current.params]]" class="static-map" id="map">
</div>
<div class="tabs">
</div>
</div>
</div>
</body>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.3/angular-route-segment.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Can you tell me why this is happening ?? thanks im getting started with angularJS
You can use $interpolateProvider:
Used for configuring the interpolation markup. Defaults to {{ and }}.
Example:
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
Finally got it, didn't realize there was this piece of code on Index.js
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Thaks a lot guys, im really getting started so i got no idea why was this part of code until now....
With Angular JS you should use {{ scopeVariableName }}, below is a very simple and easy to understand example for you to get started.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>