Issue
I have a problem in retrieving the value of the radio button with angularJS.
I have done displaying roles of users in the form of radio buttons to send IdRole of each role selected by the administrator to the angularJS function as it is shown in this:
html code
<div class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
<label for="exampleInputEmail1">Role of User*:</label>
<div class="radio radio-info radio-inline" ng-repeat="roles in ListRolesUsers">
<input type="radio" id="inlineRadio1" name="roleUser" ng-model="roleUser" value="{{roles.idRole}}">
<label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
</div>
AngularJS
var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
$scope.AddUsers = function() {
console.log("id role of user: "+$scope.roleUser); // id role of user: undefined
}
}
After a test always idRole is undefined I do not know why.
The list of roles is displayed in the browser:
Role of User*:
1 // Admin
2 // SuperUsers
3 // SimpleUsers
format of ListRolesUsers:
[{"idRole":1,"nomRole":"Admin","authority":"Admin"},
{"idRole":2,"nomRole":"SuperUsers","authority":"SuperUsers"},{"idRole":3,"nomRole":"SimpleUsers","authority":"SimpleUsers"}]
The list of roles is retrieved from the database
How to ensure that the value of the radio button?
Solution
You seems to have a classic scope issue. Your ngRepeat is creating a new scope for each item. And, when you set a ngModel like you did, you will affect it to your ngRepeat-item scope.
To avoid it, two solutions :
use a named controller
Html
<div ng-controller="Users as $ctrl" class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
<label for="exampleInputEmail1">Role of User*:</label>
<div class="radio radio-info radio-inline" ng-repeat="roles in $ctrl.ListRolesUsers">
<input type="radio" id="inlineRadio1" name="roleUser" ng-model="$ctrl.roleUser" ng-value="roles.idRole">
<label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
</div>
</div>
JS
var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
var vm = this;
$scope.AddUsers = function() {
console.log("id role of user: "+vm.roleUser); // id role of user: undefined
}
}
Use an object in your ngModel
Html
<div class="form-group" ng-class="{ 'has-error' : myForm.roleUser.$touched && myForm.roleUser.$error.required }">
<label for="exampleInputEmail1">Role of User*:</label>
<div class="radio radio-info radio-inline" ng-repeat="roles in ListRolesUsers">
<input type="radio" id="inlineRadio1" name="roleUser" ng-model="userSelection.roleUser" ng-value="roles.idRole">
<label for="inlineRadio1"> <strong> {{roles.idRole}} // {{roles.nomRole}}</strong> </label>
</div>
</div>
JS
var app = angular.module('Mainapp', ['ngRoute','file model','ui.bootstrap','ngMessages']);
app.controller("Users"['$scope','fileUpload','$http','$window', function($scope,fileUpload,$http,$window){
$scope.userSelection = {};
$scope.AddUsers = function() {
console.log("id role of user: "+$scope.userSelection.roleUser); // id role of user: undefined
}
}
The best way is clearly the first one, use a named controller.
Answered By - Julien TASSIN
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.