Utilizing radio buttons within an ng-repeat loop in AngularJS

Question

Utilizing radio buttons within an ng-repeat loop in AngularJS

At the moment, I am facing an issue with setting up an array of options for the user to choose from. Here is how my setup looks:

Here are the available options:

 $scope.licenses = [...]

The currently selected option is:

 $scope.selectedLicense = $scope.licenses[0];

In my HTML code, it appears as follows:

    <ul>
        <li ng-repeat="lic in licenses">
            <input type="radio" ng-model="selectedLicense" value="lic"></input>
                {{lic.nrOfLicenses}}
        </li>
    </ul>

However, upon loading the page, no radio button is automatically pre-selected.

You can find a working example here: http://jsfiddle.net/HB7LU/9765/

I can't seem to figure out what might be causing this issue. Any ideas on where I may have gone wrong?

javascript angularjs

Answer 1

Answer №1

When using the ng-repeat directive, a new scope is created for each iteration

For more information, refer to the official documentation

Each template instance has its own scope

Therefore, when looping through, there exists a scope variable named selectedLicense in each child scope. Consequently, your $scope.selectedLicense will not be bound to the radio buttons as expected.

You can utilize prototypical inheritance to overcome this issue. Learn more about JavaScript Prototypal Inheritance

$scope.x = {};
$scope.x.selectedLicense = $scope.licenses[0].nrOfLicenses;

<input type="radio" ng-model="x.selectedLicense" ng-value="lic.nrOfLicenses"></input>
// Angular first searches for `selectedLicense` in the child scope, then looks for x object in the parent scope when it doesn't find it in the child scope.

Check out the demo Fiddle

In the example above, the radio buttons are bound to the nrOfLicenses property within the object.

If you wish to bind the radio button to the entire object, follow these steps:

$scope.x = {};
$scope.x.selectedLicense = $scope.licenses[0];

<input type="radio" ng-model="x.selectedLicense" ng-value="lic"></input>

Here's the demo Fiddle

Answer 2

When using the ng-repeat directive, a new scope is created for each iteration

For more information, refer to the official documentation

Each template instance has its own scope

Therefore, when looping through, there exists a scope variable named selectedLicense in each child scope. Consequently, your $scope.selectedLicense will not be bound to the radio buttons as expected.

You can utilize prototypical inheritance to overcome this issue. Learn more about JavaScript Prototypal Inheritance

$scope.x = {};
$scope.x.selectedLicense = $scope.licenses[0].nrOfLicenses;

<input type="radio" ng-model="x.selectedLicense" ng-value="lic.nrOfLicenses"></input>
// Angular first searches for `selectedLicense` in the child scope, then looks for x object in the parent scope when it doesn't find it in the child scope.

Check out the demo Fiddle

In the example above, the radio buttons are bound to the nrOfLicenses property within the object.

If you wish to bind the radio button to the entire object, follow these steps:

$scope.x = {};
$scope.x.selectedLicense = $scope.licenses[0];

<input type="radio" ng-model="x.selectedLicense" ng-value="lic"></input>

Here's the demo Fiddle

Answer 3

Answer №2

It is recommended to utilize the ng-value directive instead of value, as this allows you to work with your scope object effectively.

<input type="radio" name="license" ng-model="selectedLicense" ng-value="lic"></input>

Check out this example on jsFiddle

Answer 4

It is recommended to utilize the ng-value directive instead of value, as this allows you to work with your scope object effectively.

<input type="radio" name="license" ng-model="selectedLicense" ng-value="lic"></input>

Check out this example on jsFiddle

Utilizing radio buttons within an ng-repeat loop in AngularJS

Answer №1

Answer №2

Similar questions

Using MUI with React Hook Form: Initially fill out the TextField value, only to find it unmodifiable thereafter

"Subscribing to a Meteor collection results in the entire collection being returned

What is the most effective way to update a variable from a function in Angular?

Capturing an error within an asynchronous callback function

Is it possible to create a personalized serialize form when sending an AJAX POST request

Tips for effectively handling numerous events from multiple Slickgrid instances on a single page

JavaScript dropdown menu that dynamically changes colors

Determine which array within an object is the longest in terms of length

Unable to change the AJAX variable that was returned

A Guide to Performing Dual API Calls within Angular for a Single Component

Retrieve all data entries added today on Mongo, specifically for beginners

The display of data in Datatables is malfunctioning

Is there a way to prevent a page from redirecting when a checkbox is clicked?

The FormData() object in Django backend is consistently found to be void of any data

Utilize Google Cloud Endpoints for uploading files to a Google App Engine application

Angular-maps-google search bar

Angular is not providing the anticipated outcome

Learn how to display only certain elements when triggered by the click of another

Angular concise conditional statement

Transform a JSON array containing individual objects into a new JSON array with objects