CODEWITHSUNDEEP
javascriptjqueryangularjs
Jithesh Gopinathan
Jithesh Gopinathan

Reputation: 448

Radio button value getting null in angular

I have a requirement of deleting a student object from list of objects. So that I have retrieved all the student objects from the DB and stored in a variable.

There is an option to filter the students, provided a textbox so that user can enter student name and the list will be filtered upon the name entered as below screenshot:

Screenshot

So the user can select the particular student to delete from the filtered list using the radio button and can delete the particular student. But the issue is currently I am not getting the radio button value in my controller.

HTML page is as below:

<h2 align="center">Delete Student</h2>
<div ng-controller="deleteStudentController">
<form ng-submit="submitForm()">
    Student Name:<input type="text" letters-only ng-model="searchName"/><br>
    <div ng-repeat="student in students | filter:searchName" ng-show="searchName.length">
        <input type="radio" ng-model="studentRadio" value="{{student._id}}" ng-value="{{student._id}}"/>{{student | formatter}}
    </div>
    <input type="submit" value="Delete Student"/>
</form>
</div>

In the controller I have alert the value of the radio button, but its not getting any value:

mainApp.controller("deleteStudentController", function($scope,$http) {
var resData = {};
$scope.student = {};
var urlGet = "/students/all";
$http.get(urlGet)
.then(function(response) {
    $scope.students = angular.fromJson(response.data);
});

$scope.submitForm = function (){
       alert("$scope.studentRadio"+$scope.studentRadio);
   };
});

My sample JSON format is {"_id":"5765671b37f3dc940d66fad1","name":"hgh","id":"hgh","address":"hjg"}

Please help on this issue!!!!!

Upvotes: 1

Views: 1153

Answers (3)

Jithesh Gopinathan
Jithesh Gopinathan

Reputation: 448

I figured out the solution. As this is a iterating radio button, need to give the model name as "$parent.studentRadio".

<input type="radio" ng-model="$parent.studentRadio" name="studentRadio" value="{{student._id}}"/>

Thanks all....

Upvotes: 1

Saurabh Sarathe
Saurabh Sarathe

Reputation: 231

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
   
    $scope.submitForm = function (){
           alert($scope.studentRadio);
       };
    
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form ng-submit="submitForm()">
        Student Name:<input type="text" letters-only ng-model="searchName"/><br>
        <div>
          <input type="radio" value="1" ng-model="studentRadio" name="studentRadio">1
          <input type="radio" value="2" ng-model="studentRadio" name="studentRadio">2
          <input type="radio" value="3" ng-model="studentRadio" name="studentRadio">3
        </div>
        <input type="submit" value="Delete Student" />
    </form>
  </body>

</html>

Try with adding Name for your radio button.

Upvotes: 0

Muthukannan Kanniappan
Muthukannan Kanniappan

Reputation: 2079

I am not sure what is the arg passed to submitForm.

$scope.submitForm = function (){
       alert("$scope.studentRadio" + $scope.studentRadio);
   };
});

Did you check if this works?

Upvotes: 0

Related Questions