user2282534 user2282534 - 3 months ago 20
AngularJS Question

checked attribute not working in radio button

The radio button does not show up as checked by default. am trying to make my first option as checked by default. But it is not working.. any idea or suggestion?

<div Class ="form-group">
<label>Select your Email Hierarchy</label>

<div class="radio" ng-switch="deliveryMethod">
<div ng-switch-when="email">
<label>
<input type="radio" id="delivery-email" name="delivery-email"
ng-model="generated.delivery" ng-change="checkValidGenerate()"
class="check" value="EE/ER" checked="checked"/>
EE/ER
</label><br/>
<!-- some code--other option listed -->

Answer

Well, at first there's no necessity of the use of checked. It should work if you attribute the value to your ngModel, otherwise it won't work:

$scope.generated.delivery = 'EE/ER';

See the example below:

(function() {
  'use strict';

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

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.deliveryMethod = 'email';
    $scope.generated = {};
    $scope.generated.delivery = 'EE/ER';
  }
})();
<!doctype html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div Class="form-group">
    <label>Select your Email Hierarchy</label>
    <div class="radio" ng-switch="deliveryMethod">
      <div ng-switch-when="email">
        <label>
          <input type="radio" id="delivery-email" name="delivery-email" ng-model="generated.delivery" ng-change="checkValidGenerate()" value="EE/ER"> EE/ER
        </label>
        <br/>
      </div>
    </div>
  </div>
</body>

</html>

Comments