Automating radio button selection in AngularJS: Let your code choose the option

Question

Automating radio button selection in AngularJS: Let your code choose the option

In a form with two radio buttons, I am trying to set the first one as the default selection.

<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.explicitDisabled">

Although I have designated the first option as selected in my controller, it does not seem to be working...

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

this.explicitDisabled = false;

this.playlistSelected = this.cleanPlaylist;

})

javascript angularjs radio-button

Answer 1

Answer №1

Ensure that you assign a value to the radio button, using ng-value which is an angular expression that will be set to ng-model when the radio button is selected, as explained in the documentation.

To implement this functionality, follow these steps:

(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>

Answer 2

Ensure that you assign a value to the radio button, using ng-value which is an angular expression that will be set to ng-model when the radio button is selected, as explained in the documentation.

To implement this functionality, follow these steps:

(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>

Answer 3

Answer №2

Why is playlistSelected currently null? It should be assigned a value that corresponds to the selected radio button. Have you considered using cleanPlaylist instead? Perhaps hardcoding the radio button value and then setting it as the playlistSelected in the controller would be a more efficient solution.

Answer 4

Why is playlistSelected currently null? It should be assigned a value that corresponds to the selected radio button. Have you considered using cleanPlaylist instead? Perhaps hardcoding the radio button value and then setting it as the playlistSelected in the controller would be a more efficient solution.

Automating radio button selection in AngularJS: Let your code choose the option

Answer №1

Answer №2

Similar questions

Tips for showing validation message just one time along with multiple error messages

Triggering an automatic pop-up window using JavaScript based on a PHP condition

Manipulate jQuery to set the table row containing empty table data cells to be lower than the row with

transform JSON structure into an array

Passing multiple arguments to a callback function in node-js without using promises

TinyMCE - The control with the name 'content' is considered invalid and cannot receive focus

Node.js and Azure blob storage compliment each other perfectly

Transform JSON data into a CSV file using JavaScript or C# in an MVC4 framework, then import the data into

Node/Express: The $ symbol is failing to recognize the input for PORT 8080

Chrome App Experiencing Issues with DOM Loading

Is there a way to conceal the contents of a page until all the images have finished loading?

What methods can be used to create data for the child component?

Is there a way to integrate a MySQL database with parcel-bundler in a Node.js environment, or is there a simpler method to achieve this database integration with parcel-bundler?

Having trouble establishing a connection with Mongo.Client on localhost 27017 for MongoDB

What could be causing the shake effect on the MUI dialog to not work when clicking away?

Module specifiers that are considered relative must always commence with either "./", "../", or just "/"

What is the best way to transform a JavaScript object into a JavaScript literal?

HTML Tutorial: A Beginner's Guide to Invoking REST API

Unable to locate Node.js /socket.io/socket.io.js on express 4.0

Develop a novel function