angularjshtml-tableangularjs-material

Angular material md-radio-button in table tr repeat


I am unable to use md-radio-button properly within tr repeat, is there any way to use it without md-radio-group or placing md-radio-group above the tr, so that it will be same for all rows in table.

<form form-submit action="">
    <table>
      <tr ng-repeat="data in data2">
        <td>
    <md-radio-group ng-model="test">
      <md-radio-button  value="{{data.name}}" aria-label="Label {{data.id}}"></md-radio-button>
    </md-radio-group>
        </td>
        <td>{{data.id}}</td>
      </tr>      
    </table>
    <md-button type="submit" class="md-raised">Submit</md-button>
</form>

Solution

  • It seems like the md-radio-group input breaks tags. You can still fake it in CSS by wrapping the radio button in a and applying display:table row

           <table>
            <md-radio-group ng-model="test" class="md-primary">
              <div ng-click="setSelect(data.name)" style="display:table-row" ng-repeat="data in data2">
                <md-radio-button ng-value="data.name">
                  {{data.id}}
                </md-radio-button>
              </div>
            </md-radio-group>
          </table>
    

    md-radio-group also seems to mess up tags, so a simple function called with ng-click on the wrapping the button takes care of that

     $scope.setSelect = function(modelVal){
        $scope.test=modelVal;
     }
    

    Example