angular js ng-repeat a radio button list from scope with a default checked

Question

app.controller('radiusController', function($scope){
    $scope.radii = [
        {id:.25, checked:"false", name:"1/4 Mile"},
        {id:.5, checked:"false", name:"1/2 Mile"},
        {id:1, checked:"false", name:"1 Mile"},
        {id:2, checked:"true", name:"2 Mile"},
        {id:3, checked:"false", name:"3 Mile"},
        {id:4, checked:"false", name:"4 Mile"},
        {id:5, checked:"false", name:"5 Mile"}
    ];
    $scope.handleRadioClick = function(radius){
        window.radiochecked = radius.id;
    };
});

<li ng-repeat="radius in radii" id="selectradius-{{radius.id}}">

              <div class="radio">
                <label>

                  <input type="radio" name="radius"
                       ng-model="radius.checked"
                       ng-change="handleRadioClick(radius)">

                  {{radius.name}}

                </label>
              </div>

          </li>

How do I set the default radio button to be checked based on the checked value of scope radii? In this case the "2 Mile" should be checked by default.

plunker: http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview

set the value to ng-model variable so $scope.radius.checked = $scope.radii[0] — user2165424
– user2165424, Commented Aug 19, 2014 at 17:45

webmandman · Accepted Answer · 2014-08-22 23:53:54Z

4

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

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

answered Aug 22, 2014 at 23:53

webmandman

3172 gold badges4 silver badges11 bronze badges

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

1 Comment

vp_arth Over a year ago

get Controller 'ngModel', required by directive 'ngChange', can't be found!

user2165424 · Accepted Answer · 2014-08-19 17:46:27Z

0

you can set the ng-model to the specified value you want in controller

$scope.radius.checked = $scope.radii[0]

answered Aug 19, 2014 at 17:46

user2165424

4 Comments

webmandman Over a year ago

Not sure what you mean. ng-model is currently set to invoke the ng-change function.

webmandman Over a year ago

hgrathi, that didn't work. setting ng-model to a scope value does just that but not check the radio button.

webmandman Over a year ago

Still haven't found a way to do this. Anyone else? See code above.

user2165424 Over a year ago

can you add the code in plunker. i would try to fix from there

vp_arth · Accepted Answer · 2015-03-12 11:11:13Z

0

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.

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

Plunkr

answered Mar 12, 2015 at 11:11

vp_arth

15k4 gold badges43 silver badges72 bronze badges

Comments

Sergio Espallargas · Accepted Answer · 2015-04-06 22:07:44Z

0

Create an object to hold the selected value, like:

$scope.selectedValue = { id: 0 };

Update ng-model and value attributes like shown below:

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

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

edited Apr 6, 2015 at 22:07

answered Feb 6, 2015 at 17:09

Sergio Espallargas

2113 silver badges5 bronze badges

1 Comment

vp_arth Over a year ago

It does not work. Just first click on each radio calls ngChange

Collectives™ on Stack Overflow

angular js ng-repeat a radio button list from scope with a default checked

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related