Clever Geek Handbook

Angular js ng-repeat list of radio buttons from scope with default set

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 toggle to check based on the checked area radius value? In this case, "2 Mile" should be checked by default.

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

+3


source to share


4 answers


Simple. Even though ng-checked is not mentioned in the angular docs, it is available.



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


source


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



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


source


Create an object to hold the selected value, for example:

$ scope.selectedValue = {id: 0};

Update the ng-model and value attributes as shown below:

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

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

0


source


Everything is simple here

ngModel

contains the model (where we want to store the selected item)
ngValue

contains the value (which item belongs to this input)

To access the scope

one we want, we must navigate from the area ngRepeat

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

0


source






More articles:


All Articles