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

BreezeJS model, Knockout integration, empty relationships

Tips on preventing repeated data fetching logic in Next.js App Routes

Utilizing Chart.js for generating a sleek and informative line graph

Issue with specific route causing server to throw 500 error

What could be causing my JavaScript function to produce repeated letters with just one key press?

Preventing Page Scroll While New Data is Loading

The Node.js express-generator application encounters a problem and is unable to start because of a TypeError: app.set function is not recognized

Can jQuery.jScrollPane be set to consistently display a vertical scroll bar?

The database is not being updated with the new values

Leverage Angular to highlight updated items within a list

Top method for developing a Wizard element within React

various stunning galleries accessible from a single page of thumbnail images

When converting JavaScript to PHP using AJAX, PHP retrieves an empty array

What is the best way to show only a specific v-for element in Vue.js?

Verify the changing text within a Span tag with the use of Selenium in Java

Instead of presenting MySQL data in tables on an HTML page, showcase it in editable text boxes

Navigate to the adjacent IDs

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

NX monorepo: project utilizes the source files of the library rather than using the files from the distribution folder

Changes to the model cannot be realized unless $scope.$apply is used