AngularJS: Automatically select a radio button

Question

I have two radio buttons and I want the first to be automatically selected

<input type="radio" name="playlist" ng-value="myCtrl.cleanPlaylist" ng-model="myCtrl.playlistSelected"> Clean

<input type="radio" name="playlist" ng-value="myCtrl.explicitPlaylist" ng-model="myCtrl.playlistSelected" ng-disabled="myCtrl.

I have the first one to be selected in my controller but for some reason it's not working...

var myModule = angular.module("MyApp", []).controller('MyController', function(){

this.explicitDisabled = false;

this.playlistSelected = this.cleanPlaylist;

})

Maybe I'm missing someone but why not just add the checked property to the first? Couldn't believe the other answers didn't say that — Richard Hamilton
– Richard Hamilton, Commented Jul 8, 2016 at 16:13

developer033 · Accepted Answer · 2016-07-07 23:04:59Z

2

You must set a value for radio button, ng-value is an angular expression to which ng-model will be be set when the radio is selected, according to docs.

Then, to make it works you can do it as following:

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;
      
      vm.playlistSelected = 'clean';
    });
})();

<!DOCTYPE html>
<html ng-app="app">

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

<body ng-controller="mainCtrl as main">
  <input type="radio" name="playlist" value="clean" ng-model="main.playlistSelected"> Clean
  <input type="radio" name="playlist" value="complete" ng-model="main.playlistSelected"> Complete
</body>

</html>

answered Jul 7, 2016 at 23:04

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Brand · Accepted Answer · 2016-07-07 23:01:30Z

0

playlistSelected is null, it will need a value that matches the value of the radio button. What is cleanPlaylist? Why not just hardcode the value of the radio and then set the playlistSelected to that value in the controller.

answered Jul 7, 2016 at 23:01

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

AngularJS: Automatically select a radio button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related