CODEWITHSUNDEEP
javascripthtmlangularjs
OddDev
OddDev

Reputation: 1611

Radio button acts strangely with ng-repeat

I have this code to generate a list of radio buttons :

                <div ng-show="user.role != 'COLLABORATEUR'">
                <div class="form-group row clearfix">
                    <label for="roleRadio" class="col-sm-3 control-label">Role</label>
                    <div class="checkbox-demo-row"  ng-repeat="role in roles">
                    <div class="input-demo radio-demo row">
                            <label class="radio-inline custom-radio nowrap">
                                <input type="radio" id="roleRadio" name="roleRadio" ng-model="user.role">
                                <span>{{role.name}}</span>
                            </label>
                        </div>
                    </div>
                 </div>
            </div>

roles : [{name:"SUPERCHEF"},{name:"CHEF"},{name:"COLLABORATEUR"}]

user.role : {role:"SUPERCHEF"}

So as the date states the role SUPERCHEF should be selected by default but NO BUTTON IS SELECTED and when I click on any given button the last one is always selected and when I click a second time I can click wherever I want.

Upvotes: 0

Views: 36

Answers (1)

Seb Cooper
Seb Cooper

Reputation: 574

[EDIT] Set the ng-value of the radio input:

<input type="radio" name="roleRadio" ng-model="user.role" ng-value="{{role.id}}">

And you need to set the default value, for example:

$scope.user = {
    role: 'SUPERCHEF'
  };

Upvotes: 1

Related Questions