Link a form to retrieve multiple scope informations
Question
Sorry for disturbing. I'm struggling with a problem and would like to have some help please. So I have a form where I need to choose a country. When I validate, it must give me two divs. One with the name of the country and another with the languages spoken there. In this case, i'll take Afghanistan as an example.
The required informations are already declared in the controller and when I try to retrieve them, it gives me everything that's in the scope while i'd just like to retrieve in the first div the name of the selected country and in the second one the spoken languages.
Additionally, it'd be very well appreciated if I could have a small hint on how to link the choice in the form to the data that will be displayed.
My form
<body>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend class=" bold-white bg-black">Choisissez un pays pour découvrir les langues qui y sont parlées</legend>
<!-- Select Basic -->
<div ng-app="countriestolanguagesApp">
<div class="form-group">
<label class="col-md-4 control-label">PAYS</label>
<div class="col-md-4">
<fieldset ng-controller="PlaceController">
<select ng-model="selectedPlace" class="form-control" ng-options="place as place.name for place in places">
</select>
</fieldset>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4" for=""></label>
<div class="col-md-4 center-btn">
<a href="results.html">
<input type="submit" value="Lancer la recherche" onClick="matchCode()" />
</a>
</div>
</div>
</fieldset>
</form>
My Controller
var myapp = angular.module('countriestolanguagesApp', []);
myapp.controller('PlaceController', function($scope) {
$scope.places = [
{ "name": 'AFGHANISTAN',
"lang": [
{"name":"Pashto"},{"name":"Dari"}
]
},
];
$scope.selectedPlace = $scope.places[0];
});
My results display
<article ng-app="countriestolanguagesApp" ng-controller="PlaceController">
<div class="container">
<h2 class="red">Typologie des tiers</h2>
<p class="red">Contrôle de format unitaire des NIF (Numéro d'Identification Fiscale</p>
<div class="table-responsive">
<div >
Pays choisi : {{places}}
</div>
<div>
Langues parlées : {{}}
</div>
</div>
</div>
</article>
2 answers
solution1
0 ACCPTED 2017-06-27 15:08:40
Basically, your code looks like:
<fieldset ng-controller="PlaceController">
<select ng-model="selectedPlace" ...></select>
</fieldset>
<article ng-controller="PlaceController">
{{places}}
</article>
In this code, you are instanciating 2 times your controller. So, the fieldset part and the article part are using a different instance of PlaceController : they don't share a common PlaceController .
So, in fieldset , your data may be different than in article .
Mainly, there are 2 solutions:
Move those codes to the same instance of the controller
<div ng-controller="PlaceController">
<fieldset>
<select ng-model="selectedPlace" ...></select>
</fieldset>
<article>
{{places}}
</article>
</div>
Move your data to a service injected in the PlaceController
JSFiddle demo of how to share data between controllers with a service
solution2
-1 2017-06-27 15:09:23
Here's the matchCode() It's supposed to verify the value of an input. But is unlikely to work since this is a select
var app = angular.module('countriestolanguagesApp', []);
app.controller('PlaceController', function($scope, $http) {
$scope.codeSent = window.location.search //URL parameter to take for future use
$scope.currentElem = {};
$scope.matchCode = function() {
//Go through the tin list and compare
$scope.data.forEach(function(element){
if (element.code === $scope.codeSent) {
$scope.currentElem = element;
return true;
})
return null;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.