Skip to content Skip to sidebar Skip to footer

Angular Js Ng-repeat A Radio Button List From Scope With A Default Checked

app.controller('radiusController', function($scope){ $scope.radii = [ {id:.25, checked:'false', name:'1/4 Mile'}, {id:.5, checked:'false', name:'1/2 Mile'},

Solution 1:

Simple. Eventhough the angular docs do not mention ng-checked, it is available.

<inputtype="radio" name="radius"
                       ng-change="handleRadioClick(radius)"
                       ng-checked="radius.checked">

Solution 2:

All simple here

ngModel holds a model(where we want store selected item) ngValue holds a value(what item related to this input)

To access scope which we want, we should step up from ngRepeat scope with $parent.

<divng-repeat="radius in radii"><label><inputtype="radio"name="radius"ng-model="$parent.model"ng-value="radius" />
        {{radius.name}}
      </label></div>

Plunkr

Solution 3:

Create an object to hold the selected value, like:

$scope.selectedValue = { id: 0 };

Update ng-model and value attributes like shown below:

 <inputtype="radio" name="radius" ng-change="handleRadioClick()" 
          ng-model="selectedValue.id" value="{{radius.id}}">

See working sample: http://plnkr.co/edit/zpNItMx13YPH0guvod0D?p=preview

Post a Comment for "Angular Js Ng-repeat A Radio Button List From Scope With A Default Checked"