CODEWITHSUNDEEP
htmlangularjsradio-button
JIGAR
JIGAR

Reputation: 302

how to make radio buttons selected in angularjs

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>

Upvotes: 2

Views: 1359

Answers (3)

macrog
macrog

Reputation: 2105

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

Upvotes: 1

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22875

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.

Upvotes: -1

Juan
Juan

Reputation: 3705

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>

Upvotes: 1

Related Questions