how to make radio buttons selected in angularjs

Question

i am new to angularjs and javascript,I am having a list of radio buttons and have to make some of them selected,so can anybuddy please tell me how to achieve this?I tried ng-value=true with no luck,my code is as below:

<ons-list-item modifier="tappable"  ng-repeat="area in vm.AreaList" >
    <label class="radio-button radio-button--list-item line-h45">
        <input type="radio"  ng-bind="area.name"  ng-model="vm.selectedArea" name="area" ng-value="area.code" >
        <div class="radio-button__checkmark radio-button--list-item__checkmark">

        </div>
        {{area.name}}
    </label>
</ons-list-item>

Read the AngularJS input[radio] API Docs

georgeawg
– georgeawg

2015-11-20 14:53:45 +00:00
Commented Nov 20, 2015 at 14:53 — georgeawg
– georgeawg, Commented Nov 20, 2015 at 14:53

macrog · Accepted Answer · 2015-11-20 15:03:10Z

1

you can do something like this in your controller:

 $scope.results = {
      favorites: [{
        id: "WatchList1",
        title: "WatchList1"
      }, {
        id: "WatchList2",
        title: "WatchList2"
      }, {
        id: "WatchList3",
        title: "WatchList3"
      }]
    };

$scope.selectedRow = {
  id: 'WatchList2'
};

$scope.event = {
  type: {
      checked: true
  }
}

and your html:

<div>
  <div ng-repeat="row in results.favorites">
  <input type="radio" ng-model="selectedRow.id" value="{{ row.id }}" style="opacity: 1;" class="pointer" />
  <span>{{ row.title }}</span>
  </div>
</div>

Single box

answered Nov 20, 2015 at 15:03

macrog

2,0951 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juan · Accepted Answer · 2015-11-20 14:05:18Z

1

You should use ngChecked for that.

https://docs.angularjs.org/api/ng/directive/ngChecked

    <ons-list-item modifier="tappable"  ng-repeat="area in vm.AreaList" >
        <label class="radio-button radio-button--list-item line-h45">
            <input type="radio"  ng-bind="area.name"  ng-model="vm.selectedArea" name="area" ng-value="area.code" 
                 ng-checked="true">
            <div class="radio-button__checkmark radio-button--list-item__checkmark">
            </div>
            {{area.name}}
        </label>
    </ons-list-item>

answered Nov 20, 2015 at 14:05

Juan

3,70323 silver badges34 bronze badges

Comments

Zohaib Ijaz · Accepted Answer · 2015-11-20 14:07:49Z

-1

Only one radio button can be selected at a time.

If you want multiple selected items, then use checkbox and to select, make model value equal to value attribute.

answered Nov 20, 2015 at 14:07

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

3 Comments

RononDex Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review

Zohaib Ijaz Over a year ago

answer does not mean that it must be some piece of code. Isn't it?

showdev Over a year ago

No, but the question is how to set a radio button as "selected".

Collectives™ on Stack Overflow

how to make radio buttons selected in angularjs

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related