0

We have a section of our website where users can submit data. This section allows users to add additional entries and submit them all at once. We had to rewrite this section after we updated the version of AngularJS the site used to the most recent. When a user first accesses the page, the first entry is ready and available for the user to fill out. They can click on a button and it will add another entry. These entries can be navigated via tabs. Once a second entry has been added and a radio button selected, the selected radio button on the first entry is deselected in the view. If you go back to the first entry and re-select a radio button, any selected radio button on the second entry is de-selected. Checking the model, the values are still stored and if the user saves, then the correct values are saved to the database. I don't know if it matters in this case, but the radio button options are populated via data from the database. Everything in the controller appears to be working correctly.

Here is a concentrated bit from the template:

<uib-tabset active="activeTabIndex" ng-show="!nothingToShow && showThisStuff">
    <uib-tab ng-repeat="entry in things.items" active="{{entry.active}}" ng-model="entry">
        <uib-tab-heading>Heading Here</uib-tab-heading>
        <div>
            <!-- some other stuff here -->
            <div>
                <label>Label Here</label>
                <br />
                <div ng-repeat="input in inputTypes">
                    <input name="inputTypes" type="radio" data-ng-value="input.theTypeId" ng-model="entry.theTypeId">
                    <label>{{input.localizedName | translate}}</label>
                </div>
            </div>
            <!-- More stuff here-->
        </div>
    </uib-tab>
</uib-tabset>

I have a feeling that I'm not doing something right since ng-repeat is involved, but I feel that since the selection points to entry that multiple entries should be isolated from each other. Very well could be wrong, though.

Here's a list of things I've looked at to try and resolve this issue:

Brad
  • 272
  • 2
  • 7
  • 22
  • can we see what is inside the object/array called 'things' – Tom Edwards Dec 11 '18 at 16:19
  • Radio buttons are grouped by their name, and you are giving them all the same name. Hence any selection of one radio button will deselect any other radio button. – Pop-A-Stash Dec 11 '18 at 16:35
  • 1
    Is it because the name of all radio buttons is `inputTypes` so they are treated as a single group even though you are displaying them on different tabs? Is there a unique value from your `entry` object that you could append to the name to make each group of radio buttons separate from the others? – Lex Dec 11 '18 at 16:35
  • I tested it and, yes, it was because the name for all groupings of `inputTypes` were the same. Updating them to pull part of their name from the entry they belonged to appears to resolve the issue. If @Pop-A-Stash or @Lex would like to list as an answer, I'll mark it. – Brad Dec 11 '18 at 16:49

1 Answers1

0

If I understand you correctly, you try to set multiple selection instead of single selection, do you?

Try one of the following: either remove the 'name' attribute from the input, or use $index in order to give every input its unique name (example: name="inputTypes_{{$index}}").

amir.algazi
  • 189
  • 9
  • The "name" attribute needs to be there because they need to be grouped and that is how Angular knows to group them. Only one of the radio buttons is to be selected per object. And yes, updating the name to be unique per object resolved the issue. – Brad Dec 11 '18 at 20:34