CODEWITHSUNDEEP
angularjs
Gaurav123
Gaurav123

Reputation: 5209

How to get value of selected radio button in angularjs

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.

Upvotes: 10

Views: 90387

Answers (7)

Harry Bosh
Harry Bosh

Reputation: 3790

<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}}

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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>

Upvotes: 27

Nikolay Frick
Nikolay Frick

Reputation: 2205

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)
  };
});

Upvotes: 0

SantoshK
SantoshK

Reputation: 1877

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>'

Upvotes: 0

Manikanta Reddy
Manikanta Reddy

Reputation: 857

angular.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>

Upvotes: 7

anujayk
anujayk

Reputation: 584

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>

working demo

Hope this is what you are looking for.

Upvotes: 2

Prabjot Singh
Prabjot Singh

Reputation: 4767

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}}

Upvotes: 3

Related Questions