GETTING RADIO BUTTON VALUE WHEN BUTTON IS CLICKED IS NOT WORKING ANGULARJS

Pawan Shukla

Total Post:29

Points:203
Posted by  Pawan Shukla
 3064  View(s)
Ratings:
Rate this:

I am new in angularjs.I want to fetch the radio button value when user click a button,but my bad luck its not working.Here is the code

<label class="item item-radio">
    <input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt1}}">
    <div class="item-content item-body">a) {{questions.quiz_ans_opt1}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio item-body">
    <input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt2}}">
    <div class="item-content item-body">b) {{questions.quiz_ans_opt2}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<button class="button button-balanced button-block" ng-click="submitAnswer(user)">Submit</button>

Here is controller

$scope.submitAnswer = function(user) {
    //it output undefined error
    alert(user);
}

Also i want to disable the button until a radio button is checked,how can i achive this?

  1. Brad Pitt

    Post:61

    Points:429
    Re: Getting radio button value when button is clicked is not working angularjs

    Please have a look at this,

    Try this,

    In html,

    <body ng-controller="MainCtrl">
      <p>Hello {{name}}!</p>
      <input type="radio"ng-model="user.answer" ng-value="'option a'">
      <label>option a</label>
      <br>
      <input type="radio" ng-model="user.answer" ng-value="'option b'">
      <label>option b</label>
      <br>
      <input type="radio" ng-model="user.answer" ng-value="'option c'">
      <label>optionc</label>
      <br>
      <input type="radio" ng-model="user.answer" ng-value="'option d'">
      <label>option d</label>
      <br>
      <button ng-disabled="!user.answer"ng-click="submitAnswer(user)">Submit</button>
    </body>

    In app.js,

    var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.submitAnswer=function(user){
        alert(user.answer);
      }
    });

      Modified On Apr-06-2018 06:29:22 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!