Radio button is not getting checked in Angular (1.x)

Question

I am working on project with Angular JS.

I have created a group of radio button. Their values are coming from backend.

Everything is working fine.

Only problem is that Radio button are not getting checked if I try to click on them.

They are not disabled. But they remain unchecked.

Below is my HTML code for the same:

<div class="row">
    <div class="col-md-3 radio-vehicle">
        <label>Vehicle-3</label>
        <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc1" value="{{vehicle.name}}" ng-change="updateCount()"
            ng-model="$parent.vh1" ng-disabled="dest3 === 'none'">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
        </div>
    </div>
    <div class="col-md-3 radio-vehicle">
            <label>Vehicle-2</label>
            <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc2" ng-change="updateCount()" ng-model="$parent.vh2" value="{{vehicle.name}}" ng-disabled="dest2 === 'none'" ng-checked="false">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
            </div>
        </div>
        <div class="col-md-3 radio-vehicle">
            <label>Vehicle-3</label>
            <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc3" ng-change="updateCount()" ng-model="$parent.vh3" value="{{vehicle.name}}" ng-disabled="dest3 === 'none'" ng-checked="false">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
            </div>
        </div>
        <div class="col-md-3 radio-vehicle">
            <label>Vehicle-4</label>
            <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc4" ng-change="updateCount()" ng-model="$parent.vh4"  value="{{vehicle.name}}" ng-disabled="dest4 === 'none'" ng-checked="false">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
            </div>
        </div>
 </div>

This is the service from where I am getting my records:

https://findfalcone.herokuapp.com/vehicles

I am adding screenshot of my application too, so that you will know what I am trying to achieve:

@SurjeetBhadauriya: ng-model="vh3" is the value for ng-model so that I can access the value of radio button in controller.. — Anubha Gupta, Jan 04 '18 at 11:00

Sajal · Accepted Answer · 2018-01-04T11:47:52.387

Need to set the ng-model to "$parent.vh3" so then you can bind the value of the selected radio button outside the radio button group.

Make sure that name for each input type ="radio" button group is different.

var app = angular.module("app", []).controller("ctrl", function($scope) {
  $scope.vehicles = [{
    name: 'A',
    total_no: 5
  }, {
    name: 'B',
    total_no: 15
  }, {
    name: 'C',
    total_no: 25
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <div class="row">
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-1</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc1" value="{{vehicle.name}}" ng-change="updateCount()" ng-model="$parent.vh1" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-2</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc2" ng-change="updateCount()" ng-model="$parent.vh2" value="{{vehicle.name}}" ng-disabled="dest2 === 'none'" ng-checked="false"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-3</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc3" ng-change="updateCount()" ng-model="$parent.vh3" value="{{vehicle.name}}" ng-disabled="dest3 === 'none'" ng-checked="false"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-4</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc4" ng-change="updateCount()" ng-model="$parent.vh4" value="{{vehicle.name}}" ng-disabled="dest4 === 'none'" ng-checked="false"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
  </div>

  <pre> {{ vh1 }} {{ vh2 }} {{ vh3 }} {{ vh4 }}</pre>

</body>

It didnt work for me.. Actually I have four type of similar radio button. I ll update the code. Maybe thats why — Anubha Gupta, Jan 04 '18 at 11:33
Make sure that `name` of each `input type radio` button group is different, for ex : `vc1, vc2, vc3, vc4` — Sajal, Jan 04 '18 at 11:39
I can see that `vc3` has been named twice. Also, you missed `$parent.vh3` for vehicle 3, see the update to the answer. — Sajal, Jan 04 '18 at 11:43
Sorry, that was typo here, but not in my code. Problem is this code is working fine with backend. I mean , radio button's value are updating fine in controller. Its just I checked symbol is not appearing on UI. — Anubha Gupta, Jan 04 '18 at 11:50
Hi, Your suggestion made my code work. I mean, earlier it was not even updating radio button's value in the controller. After using $parent attribute its working fine. Radio button checked was not appearing because some styles got conflicted. Thank you. — Anubha Gupta, Jan 04 '18 at 11:54

Vivz · Answer 2 · 2018-01-04T11:55:13.217

Your ng-repeat is creating a child scope. So the vh3 is not directly binded to the scope of the controller. You can bind the variable to an object or use contoller as syntax which will implicitly take care of the Dot Rule.

For more Info: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

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

app.controller('ApplicationController', function($scope) {
    $scope.modelVal = {};
    $scope.vehicles = [{
        "name": "BMW",
        "total_no": 1
    }, {
        "name": "Porsche",
        "total_no": 2
    }]
    $scope.updateCount = function() {
        console.log($scope.modelVal)
    }
});

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>

<body>
    <div class="container" ng-controller="ApplicationController">
        <div class="row">
            <div class="col-md-3 radio-vehicle">
                <label>Vehicle-1</label>
                <div ng-repeat="vehicle in vehicles">
                    <input type="radio" name="vc1" ng-value="vehicle.name" ng-change="updateCount()" ng-model="modelVal.vh1" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
                </div>
            </div>
            <div class="col-md-3 radio-vehicle">
                <label>Vehicle-2</label>
                <div ng-repeat="vehicle in vehicles">
                    <input type="radio" name="vc2" ng-value="vehicle.name" ng-change="updateCount()" ng-model="modelVal.vh2" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
                </div>
            </div>
            <div class="col-md-3 radio-vehicle">
                <label>Vehicle-3</label>
                <div ng-repeat="vehicle in vehicles">
                    <input type="radio" name="vc3" ng-value="vehicle.name" ng-change="updateCount()" ng-model="modelVal.vh3" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Surjeet Bhadauriya · Answer 3 · 2018-01-04T11:49:26.510

0

This is happening because your value property and ng-model both contain the different value.

See, I updated the code where ng-model and value both are same. And I passed the value through ng-change function which you can get in the function named updateCount.

 <div class="row">
    <div class="col-md-3 radio-vehicle">
        <label>Vehicle-3</label>
        <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc3" value="{{vehicle.name}}" ng-change="updateCount(vehicle.name, 'Vehicle-3')"
            ng-model="vehicle.name" ng-disabled="dest3 === 'none'">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
        </div>
    </div>
 </div>

edited Jan 04 '18 at 11:49

answered Jan 04 '18 at 11:04

Surjeet Bhadauriya

6,755
3
34
52

But then how will I access the value of radio button in controller if it is not a variable? – Anubha Gupta Jan 04 '18 at 11:10
Yes man, you can get. See, I passed the value through updateCount(vehicle.name). Now, this value will be available in the same function of the controller. – Surjeet Bhadauriya Jan 04 '18 at 11:25
No I have four type of radio group. All are accessing same vehicle list. So It will difficult to analyze that from which group the value is coming. I have edited the question and put the whole code with screenshot. So you will know. – Anubha Gupta Jan 04 '18 at 11:38
pass the vehicle name also like ng-change="updateCount(vehicle.name, 'Vehicle-3')" – Surjeet Bhadauriya Jan 04 '18 at 11:50

Radio button is not getting checked in Angular (1.x)

3 Answers3