AngularJs - set radio button value in a table

Question

I'm trying to automatically set radio button to be checked when I click on its parent table's cell and also need to be able to clear selection from a button.

This is my code and I'm unable to make it to work. I did look at this thread How to select a radio button by default? but it didn't help me yet.

<tbody>
            <tr ng-repeat="row in wm.rows ">
                <td class="col-xs-3 matrix-table-td matrix-table-td-alignleft" 
                    ng-class="{selected: row.valueName === wm.selectedRow}">
                    {{row.valueName}}
                </td>
                <td class="matrix-table-td"
                    ng-repeat="column in wm.columns track by $index"
                    ng-click="wm.valueClick(row, column, $index);"
                    ng-class="{'nodata':  wm.getCellValue(row, column, 'inventoryId')===null, 'selected': $index === wm.selectedIndex && row.valueName===wm.selectedRow}">
                    <span ng-if="!wm.selectorOnly">{{ wm.getCellValue(row, column, wm.selectedField)}}</span>
                    <input type="radio" name="cellSelector"
                           ng-model="wm.selectedInventoryId"
                           ng-value="{{wm.selectedInventoryId}}"
                           ng-if="wm.selectorOnly"/>
                </td>
            </tr>
        </tbody>

So, the valueClick method sets the selectedInventoryId, but my radio button seems to have a mind of its own. When I click on the cell, often another radio button gets selected. Do you know how can I make my grid to work? And I want the radio button click select the cell or vs. versa.

Can you include your controller code in your question? – jbrown Jun 18 '18 at 18:17 — jbrown, Jun 18 '18 at 18:17

score 0 · Accepted Answer · answered Jun 18 '18 at 18:28

I was able to get it to work. I'm now using:

<input type="radio" name="cellSelector"
                           ng-model="wm.selectedIdentifier"
                           value="{{row.tmplatId.toString() + '_' + column.tmplatId.toString()}}"
                           ng-if="wm.selectorOnly"/>

And in my valueClick method I'm using this new property I added (selectedIdentifier) which I set to this value and set to empty string in the button to clear selected. Seems to work good now.

AngularJs - set radio button value in a table

1 Answers1