CODEWITHSUNDEEP
angularjs
Anubha Gupta
Anubha Gupta

Reputation: 189

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

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:

enter image description here

Upvotes: 1

Views: 2077

Answers (3)

Vivz
Vivz

Reputation: 6620

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>

Upvotes: 1

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

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>

Upvotes: 0

Sajal
Sajal

Reputation: 4401

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>

Upvotes: 1

Related Questions