Troubleshooting: Issue with nesting ng-model within radio buttons in ng-repeat loop

Question

Troubleshooting: Issue with nesting ng-model within radio buttons in ng-repeat loop

Hi there, I'm facing an issue while attempting to showcase a group of radio buttons within an ng-repeat loop. It appears that the initial values from the fields bound to ng-model are not being recognized by the input.

When providing a simple array to ng-repeat, the buttons display with their correct initial values. However, once a nested ng-repeat is introduced, only the last item in each list initializes with a value.

You can view my code on CodePen:

https://codepen.io/alokraop/pen/JXLZBp

I'm uncertain about what mistake I might be making. I'm ensuring that the name attribute for each radio button is unique within its group.

Your assistance would be greatly appreciated.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

The problem lies in the inability to interpolate an Angular value into the attribute name. By removing the name attribute from our HTML code, we are able to achieve the desired outcome. Refer to the example below:

<div ng-app="sample">
  <div ng-controller="sampleController as sample">
    Single ng-repeat:
    <div ng-repeat="queue in sample.queues">{{queue.name}} status:
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="hooked" /> hooked
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="unhooked" /> unhooked
      <input type="radio" name="queue-{{$index}}"  ng-model="queue.condition" value="partial" /> partial
    </div>
    <br />
    Nested ng-repeat:
    <div ng-repeat="qm in sample.qms">
      {{qm.name}} queues:
      <div ng-repeat="queue in qm.queues">{{queue.name}} status:
        <input type="radio" ng-model="queue.condition" value="hooked" /> hooked
        <input type="radio" ng-model="queue.condition" value="unhooked" /> unhooked
        <input type="radio" ng-model="queue.condition" value="partial" /> partial
      </div>
    </div>
  </div>

</div>

To dynamically include a name, consider utilizing an Angular name directive like this: Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs

Answer 2

The problem lies in the inability to interpolate an Angular value into the attribute name. By removing the name attribute from our HTML code, we are able to achieve the desired outcome. Refer to the example below:

<div ng-app="sample">
  <div ng-controller="sampleController as sample">
    Single ng-repeat:
    <div ng-repeat="queue in sample.queues">{{queue.name}} status:
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="hooked" /> hooked
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="unhooked" /> unhooked
      <input type="radio" name="queue-{{$index}}"  ng-model="queue.condition" value="partial" /> partial
    </div>
    <br />
    Nested ng-repeat:
    <div ng-repeat="qm in sample.qms">
      {{qm.name}} queues:
      <div ng-repeat="queue in qm.queues">{{queue.name}} status:
        <input type="radio" ng-model="queue.condition" value="hooked" /> hooked
        <input type="radio" ng-model="queue.condition" value="unhooked" /> unhooked
        <input type="radio" ng-model="queue.condition" value="partial" /> partial
      </div>
    </div>
  </div>

</div>

To dynamically include a name, consider utilizing an Angular name directive like this: Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs

Troubleshooting: Issue with nesting ng-model within radio buttons in ng-repeat loop

Answer №1

Similar questions

What is the best way to seamlessly transition layers from one location to another as the mouse exits and re-enters the window?

Nodemon is failing to automatically re-run the changes I've made in my local codebase

Executing a series of tests using Postman

Sending Disabled Form Field Input Value in Angular 2 POST Request

What is the best way to pass the setState value to the useEffect hook?

Not sure how to configure the settings for Firebase Firestore within the admin.firestore module

Meteor Infinity: the astronomy .save functionality seems to be malfunctioning

Using indented, multi-line logging in a NodeJS environment can help to

Manipulate the contents of an HTML class using Javascript to substitute text with an empty string

Leverage the power of AJAX to fetch and display controller action results on the current

updating react state based on filtered redux properties

How to insert an image into a placeholder in an .hbs Ember template file

Error: pos variable is not defined

Preventing opening while closed through the OnClick event

What are the best practices for utilizing the "this" keyword with fetch?

What might be the reason my $q.defer().resolve is not functioning properly?

Transmitted only JSON data instead of using multiform data with jQuery Ajax

Getting access to the current row along with its value within an AngularJS application

When trying to serialize elements from a form loaded by Firefox using AJAX, encountering difficulties due to

Show the MySQL query results in a pop-up alert box