How to get value of selected radio button 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>


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>

Tags:

Angularjs

Recent Posts