javascript - AngularJs: How to set radio button checked based on model

Javascript - AngularJs: How to set radio button checked based on model

In AngularJS, you can set a radio button to be checked based on a model using the ng-model directive and the ng-value directive (or value attribute). Here's how you can achieve this:

Example HTML and Controller

Assume you have a controller with a model named selectedOption that holds the value of the selected radio button:

<!DOCTYPE html> <html lang="en" ng-app="radioExample"> <head> <meta charset="UTF-8"> <title>AngularJS Radio Button Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-controller="RadioController as ctrl"> <h2>Select an Option:</h2> <!-- Radio buttons --> <label> <input type="radio" ng-model="ctrl.selectedOption" ng-value="'option1'"> Option 1 </label> <label> <input type="radio" ng-model="ctrl.selectedOption" ng-value="'option2'"> Option 2 </label> <label> <input type="radio" ng-model="ctrl.selectedOption" ng-value="'option3'"> Option 3 </label> <p>Selected Option: {{ctrl.selectedOption}}</p> <script> angular.module('radioExample', []) .controller('RadioController', function() { this.selectedOption = 'option2'; // Set default selected option }); </script> </body> </html>

Explanation

  1. Controller Definition: The AngularJS controller RadioController is defined with selectedOption initialized to 'option2' (this could come from a service or be dynamically set based on your application logic).

  2. Radio Buttons: Each radio button uses ng-model="ctrl.selectedOption" to bind to the selectedOption property of the controller. The ng-value directive (or value attribute) specifies the value that should be assigned to selectedOption when that radio button is selected.

  3. Display Selected Option: The selected option is displayed using {{ctrl.selectedOption}}, so you can see the current value of selectedOption in the view.

Notes

  • Default Selection: By setting this.selectedOption = 'option2'; in the controller, you're making 'option2' the initially selected radio button.
  • Dynamic Updates: Changing selectedOption programmatically in your controller will update the selected radio button and vice versa.
  • ng-value vs. value: ng-value is useful when the value needs to be dynamically evaluated or is not a simple string or number. For simple cases, you can also use value="{{someValue}}".

Running the Example

  • Copy the provided HTML code into an HTML file and open it in a web browser.
  • You should see three radio buttons labeled "Option 1," "Option 2," and "Option 3" with "Option 2" initially selected due to the default value in the controller.

This example demonstrates how to set a radio button checked based on a model in AngularJS using ng-model and ng-value. Adjust the values and logic in your controller as per your application's requirements.

Examples

  1. How to bind radio button state to a model in AngularJS? Description: Use ng-model directive to bind radio buttons to a model for checked state.

    <input type="radio" ng-model="selectedOption" value="option1"> Option 1 <input type="radio" ng-model="selectedOption" value="option2"> Option 2

  2. How to initialize radio buttons based on a model value in AngularJS? Description: Set ng-model value to preselect a radio button based on the model.

    <input type="radio" ng-model="selectedOption" value="option1"> Option 1 <input type="radio" ng-model="selectedOption" value="option2"> Option 2

  3. How to dynamically set radio button checked state using AngularJS? Description: Use ng-checked directive to conditionally set radio button checked state.

    <input type="radio" ng-model="selectedOption" ng-checked="selectedOption === 'option1'" value="option1"> Option 1 <input type="radio" ng-model="selectedOption" ng-checked="selectedOption === 'option2'" value="option2"> Option 2

  4. How to bind radio button checked state to an object property in AngularJS? Description: Bind radio button state to an object property using ng-model.

    <input type="radio" ng-model="formData.selectedOption" value="option1"> Option 1 <input type="radio" ng-model="formData.selectedOption" value="option2"> Option 2

  5. How to set radio button checked based on a boolean property in AngularJS? Description: Use a boolean property to control radio button checked state.

    <input type="radio" ng-model="isChecked" ng-checked="isChecked" value="option1"> Option 1 <input type="radio" ng-model="isChecked" ng-checked="!isChecked" value="option2"> Option 2

  6. How to handle radio button state changes in AngularJS? Description: Implement ng-change to execute a function on radio button state change.

    <input type="radio" ng-model="selectedOption" ng-change="updateSelection()" value="option1"> Option 1 <input type="radio" ng-model="selectedOption" ng-change="updateSelection()" value="option2"> Option 2

  7. How to use ng-value directive with radio buttons in AngularJS? Description: Utilize ng-value directive to bind complex values to radio buttons.

    <input type="radio" ng-model="selectedOption" ng-value="{ id: 1, name: 'Option 1' }"> Option 1 <input type="radio" ng-model="selectedOption" ng-value="{ id: 2, name: 'Option 2' }"> Option 2

  8. How to set radio button checked based on an array of values in AngularJS? Description: Use ng-repeat to dynamically generate radio buttons based on an array.

    <div ng-repeat="option in options"> <input type="radio" ng-model="selectedOption" ng-value="option.value"> {{ option.label }} </div>

  9. How to conditionally disable radio buttons in AngularJS? Description: Use ng-disabled directive to conditionally disable radio buttons.

    <input type="radio" ng-model="selectedOption" ng-disabled="isDisabled" value="option1"> Option 1 <input type="radio" ng-model="selectedOption" ng-disabled="isDisabled" value="option2"> Option 2

  10. How to style radio buttons based on their state in AngularJS? Description: Apply CSS classes dynamically based on radio button state using ng-class.

    <input type="radio" ng-model="selectedOption" ng-class="{ 'active': selectedOption === 'option1' }" value="option1"> Option 1 <input type="radio" ng-model="selectedOption" ng-class="{ 'active': selectedOption === 'option2' }" value="option2"> Option 2

More Tags

constructor render nstextview 32feet powerset imageurl heap-memory justify bokeh restsharp

More Programming Questions

More Organic chemistry Calculators

More Chemical thermodynamics Calculators

More Electrochemistry Calculators

More Mixtures and solutions Calculators