CODEWITHSUNDEEP
javascriptangularjs
Sehael
Sehael

Reputation: 3736

Several radio button groups in nested ng-repeat, but only last group shows the value

I have a page where I want to update a form with several radio buttons. I query an api, and use the returned array of objects to populate the current values for the radio buttons. The problem that I have is that only the last set of radio buttons actually shows the value. This is the code that I have (I am using [[ and ]] for the start and end symbols for angular):

<fieldset data-ng-repeat="s in sections">
    <div class="form-group">
        <div class="col-md-12">
            <h2>[[ s.section.name ]]</h2>
        </div>
    </div>

    <!-- Field Item -->
    <div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
        <div class="col-md-12 m-b-30">
            <h4>[[ f.field.name ]]</h2>
            <input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
        </div>

        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
        </div>
        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
        </div>
        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
        </div>
        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
        </div>
    </div>
    [[ f.field_condition ]]
    <hr>
</fieldset>

So basically, I have several sections, and each section has several fields. Each field has it's own radio button group (I am using the section and field ids to name the radio group). What I currently see is only the last field in each section actually shows the selected radio button. The other fields don't have any selection, even though the value for ng-model definitely does (I am showing the value of f.field_condition just to make sure there is a value).

For each field, I can see that the model is set. And if I select a value manually, I can see that the model changes, so it seems to me that the model is setup correctly. I just don't know why it won't initially show as selected for all rows but the last one.

I should also mention that if I save the form even with the missing radio button selections, the database is updated properly (it doesn't set the values to null, and if I manually change the selected value, it is updated in the db as well).

Does anyone have any ideas? Thanks!

EDIT

Here is a fiddle for this, although, it is working as expected in the fiddle. http://jsfiddle.net/dq8r196v/367/

I tried using the static data that I used in the fiddle, but I am still having the same problem. Does anyone know if this could be a CSS problem? The radio buttons are styled, and I didn't write the HTML or CSS.

UPDATE

I am still having this issue, so I built a new angular app and only used the code that is included in the fiddle that I have created. I am having the same problem with this new app, even though the same code works in the fiddle. I really don't understand what's happening here, but if anyone could shed some light, I would really appreciate it.

I have literally copied and pasted the code from my fiddle into a new angular app, and only the last group of radio buttons in each section is showing the value in the app.

Here is my complete code for the new angular app if someone else wants to try it out and see exactly what is happening: https://pastebin.com/qSR33yfM

I created the app on a single page for simplicity.

Here is the link to a pastebin with the exact json that I am using in my app: https://pastebin.com/utfVVQfT

Upvotes: 0

Views: 364

Answers (1)

Lance Whatley
Lance Whatley

Reputation: 2455

I fixed the problem you're having by simply adding an array of objects ($scope.values) representing the different radio button options, and using an ng-repeat to create your radio buttons. See the following for the updated code: https://pastebin.com/s3hNzaXX

I know there are semantics around ng-repeat creating new $scopes, and imagine there is a conflict in scopes with your nested ng-repeats where it's binding to the radio buttons incorrectly and at a scope different than you want (the section level ng-repeat).

To confirm this suspicion, you could convert all of your interpolations in the code to use functions and console.log s and f at different points and confirm that field_condition is being set at a level you didn't intend.

Either way, it' best practice to create your radio buttons through data (and using ng-repeat), as is done with the $scope.values array, and a good side effect to doing this is not only can you update the different value options using data through AJAX or however you would like, but you won't have weird angular scoping issues as you're experiencing in your current code above.

Upvotes: 1

Related Questions