CODEWITHSUNDEEP
javascripthtmlcssangularjs
HEEN
HEEN

Reputation: 4727

Not getting values of radiobutton using angularJS

I want to set values of checked radiobutton in a variable. But I am unable to get it. Below is the code what I tried

master.controller('FiberLead_Filter', function($scope, $http, NEIQC_Service, Scopes, $rootScope) {
      var rdSelectMP = $scope.MPSelect; // here I am getting undefined
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.25/angular.min.js"></script>
<div class="rightFilter" ng-controller="FiberLead_Filter as Filter" id="FiberLead_Filter">
  <div class="pdfDownload customeRadioWrap">
    <div class="customeRadio">
      <input type="radio" id="btnCurrentMP" name="radio-group" ng-model="MPSelect" ng-value="Current">
      <label for="btnCurrentMP">Current MP</label>
    </div>
    <div class="customeRadio">
      <input type="radio" id="btnAllMP" name="radio-group" ng-model="MPSelect" ng-value="All">
      <label for="btnAllMP">All MP</label>
    </div>
    <button class="btn btn-default customBtn" ng-click="DownloadExcelReport()"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Download</button>
  </div>
</div>

Let me know what is wrong with my code as I am getting it UNDEFINED

Upvotes: 1

Views: 33

Answers (1)

briosheje
briosheje

Reputation: 7446

This is because ng-value is looking for the "All" $scope variable, but there likely is none. If the expected value is a string, either use 'All' or, instead, just use value.

Working fiddle below, click the "download" button to log the current value (select a value first).

angular.module('app', []);

angular.module('app').controller('FiberLead_Filter', function($scope, $http, $rootScope) {
      $scope.DownloadExcelReport = function(){
        console.log($scope.MPSelect);
      }
    }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.25/angular.min.js"></script>
<div ng-app="app">
  <div class="rightFilter" ng-controller="FiberLead_Filter as Filter" id="FiberLead_Filter">
    <div class="pdfDownload customeRadioWrap">
      <div class="customeRadio">
        <input type="radio" id="btnCurrentMP" name="radio-group" ng-model="MPSelect" value="Current">
        <label for="btnCurrentMP">Current MP</label>
      </div>
      <div class="customeRadio">
        <input type="radio" id="btnAllMP" name="radio-group" ng-model="MPSelect" value="All">
        <label for="btnAllMP">All MP</label>
      </div>
      <button class="btn btn-default customBtn" ng-click="DownloadExcelReport()"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Download</button>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions