I have two radio buttons pass and fail.
How to get value of selected radio button.
<div class="col-md-4">
Result
<div class="radio">
<label><input type="radio" name="rdoResult">pass</label>
</div>
<div class="radio">
<label><input type="radio" name="rdoResult">fail</label>
</div>
</div>
Do I need to use ng-model or something else. In jquery I know the things well not in angularjs.
Both should have same ng-model with different ng-value(meant for use with select options or radio button), so that the selected value will be changed on result $scope variable and you can grab that value inside a controller on form submit or button click.
Markup
<div class="col-md-4">
Result
<div class="radio">
<label>
<input ng-model="result" type="radio" name="rdoResult" ng-value="'pass'">
pass
</label>
</div>
<div class="radio">
<label>
<input ng-model="result" type="radio" name="rdoResult" ng-value="'fail'">
fail
</label>
</div>
</div>
ng-model it will be available inside bounded controller scope for sure. I don't see a point behind downvote.. Its obivious that you can form value in based on some user interaction, like button click or form submit(specifically). I updated the answer thoughangular.module('resultApp', []).controller('resultCtrl', function($scope) {
$scope.result = 'pass';
$scope.submitResult = function(result) {
alert(result)
};
});<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app='resultApp' ng-controller='resultCtrl'>
<div class="col-md-4">
Result
<div class="radio">
<label><input type="radio" ng-model='result' ng-value='"pass"' name="rdoResult">pass</label>
</div>
<div class="radio">
<label><input type="radio" ng-model='result' ng-value='"fail"' name="rdoResult">fail</label>
</div>
</div>
{{result}}
<button ng-click="submitResult(result)">See Result</button>
</body>
Yes you have to add ng-model to get value of radio button
<div class="col-md-4">
Result
<div class="radio">
<label><input type="radio" ng-model="button.value" name="rdoResult" value="pass">pass</label>
</div>
<div class="radio">
<label><input type="radio" ng-model="button.value" name="rdoResult" value="fail">fail</label>
</div>
</div> {{button.value}}
Here is your javascript
<script>
aap=angular.module('myApp',[])
.controller('myCtrl',["$scope",function($scope){
$scope.change='data';
$scope.getVal=function(){
console.log($scope.changedVal);
$scope.change=$scope.changedVal;
}
}]);
</script>
and your html
<body ng-app="myApp">
<h1>{{1+1}}</h1>
<div class="col-md-4" ng-controller="myCtrl">
Result
<div class="radio">
<label><input type="radio" name="rdoResult" ng-model="changedVal" value="pass" ng-click="getVal()">pass</label>
</div>
<div class="radio">
<label><input type="radio" name="rdoResult" ng-model="changedVal" value="fail" ng-click="getVal()">fail</label>
</div>
{{change}}
</div></body>
Hope this is what you are looking for.
Inside of Directive and ng-repeat above solutions will not work
Here is the best way to get selected value inside directive :
Template : '<tr ng-repeat="item in ExistingReportData"><td class="text-center"><input type="radio" name="rbReportData" ng-change="RadioChange(item.ActivityHeaderId)" ng-model="SelectedExistingReportData" ng-value="{{item.ActivityHeaderId}}"/>{{item.ActivityHeaderId}}</td></tr>'
controller: function ($scope) {
$scope.RadioChange = function (s) {
$scope.SelectedExistingReportData = s;
};
$scope.setWeldDataToGrid = function () {
alert($scope.SelectedExistingReportData);
// $('.modal').modal('hide');
}
}
'<button class="btn button-main btn-primary btn-sm" id="btnWelderSetTo" ng-click="setWeldDataToGrid()" ><span aria-hidden="true" class="glyphicon glyphicon-save"></span> {{ \'OK\' | translate }}</button>'
Using dot (.) in ng-model solved the problem:
In your HTML:
<input id="base" type="radio" name="content" ng-model="radio.fileType" ng-value="'base'" ng-click="refreshScreen()">
<input id="dynamic" type="radio" name="content" ng-model="radio.fileType" ng-value="'dynamic'" ng-click="refreshScreen()">
<button type="button" class="btn btn-default" ng-click="downloadFile(radio.fileType)">Get Template</button>
In your controller:
angular.module('resultApp', []).controller('resultCtrl', function($scope) {
$scope.downloadFile= function(result) {
alert(result)
};
});
<input type="radio" ng-model="teamSelectionOption.name" value="choose">choose<br>
<input type="radio" ng-model="teamSelectionOption.name" value="create">create<br>
setting the default option and updating it is done like so in the controller
$scope.teamSelectionOption = {
name: 'create'
};
then accessing in the template. {{teamSelectionOption.name}}
