What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Question

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Let's say I have a controller that contains an array property named 'houses'. I want to use ng-repeat to display this array on a table row with a set of radio buttons (true/false, etc.). How can I ensure that selecting any of these radio buttons will update the corresponding item in the model array? I attempted to set the ng-model attribute on the radio buttons like so:

ng-model="array[{{$index}}]"

Unfortunately, this approach did not work as expected. Instead of getting the index value, I ended up with the literal string '$index'. Has anyone successfully achieved this functionality in Angular before?

javascript angularjs

Answer 1

Answer №1

To get it to work, you don't need the curly brackets. I have created a sample in Plunker.

$scope.houses = [true, false, true, false, false];

<ul>
  <li ng-repeat="house in houses">
    Checked: <input type="checkbox" ng-model="houses[$index]" />
  </li>
</ul>

{{houses}}

If you are dealing with a complex object and want to set its property (like

ng-model="houses[$index].checked"

), you should simply use the iterator (i.e. ng-model="house.checked"). This way, house will iterate over each of the array objects.

Answer 2

To get it to work, you don't need the curly brackets. I have created a sample in Plunker.

$scope.houses = [true, false, true, false, false];

<ul>
  <li ng-repeat="house in houses">
    Checked: <input type="checkbox" ng-model="houses[$index]" />
  </li>
</ul>

{{houses}}

If you are dealing with a complex object and want to set its property (like

ng-model="houses[$index].checked"

), you should simply use the iterator (i.e. ng-model="house.checked"). This way, house will iterate over each of the array objects.

Answer 3

Answer №2

It has come to light that there is a known issue related to this specific scenario. Unfortunately, it appears that achieving the desired outcome may not be possible as the radio buttons operate within their own scope due to the presence of the ng-repeat.

However, an alternative solution involving the use of the checked attribute can be implemented: check out the code here

Answer 4

It has come to light that there is a known issue related to this specific scenario. Unfortunately, it appears that achieving the desired outcome may not be possible as the radio buttons operate within their own scope due to the presence of the ng-repeat.

However, an alternative solution involving the use of the checked attribute can be implemented: check out the code here

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Answer №1

Answer №2

Similar questions

What is the process for redirecting to a different URL when the button is clicked?"

"Revolutionary AJAX-enabled PHP social commenting system with multi-form support

Updating the title with respect to the current route in AngularJS 1

Creating a custom JavaScript function to manipulate arrays

Utilizing React and Google Code to Enhance Lead Conversion Pages

Resetting the check status in html can be accomplished by using the checked

Troubleshoot AngularJS in Visual Studio (but not in Visual Studio Code)

The Angular template in the attribute is not being interpreted correctly

Optimal approach for reutilizing Javascript functions

Save the language code (ISO 639) as a numerical value

Tips for transferring client-side data to the server-side in Angular, Node.js, and Express

What is the best way to pass JavaScript object literals from a Node.js server to the frontend browser?

Having trouble connecting my chosen color from the color picker

Are you familiar with the Pagination and Card Components offered by Ant Design (antd)?

Tips for updating the value of a $scope variable and running tests with AngularJS Jasmine

Receive alerts in Swift from WKWebView when a particular screen is displayed in HTML

Different scenarios call for different techniques when it comes to matching text between special characters

Unable to reach the sub-component of the JSON object that was returned

Having trouble retrieving complete object details through ng-model while utilizing ng-options

Creating pathways in AJAX with Rails