Setting the default value for a radio inside of ng-repeat (angular-js)

Question

How can I set a default value for the radios if this value is an object and not a string?

EDIT:

To make things more clear I updated 's fiddle: Check out the fiddle: http://jsfiddle.net/JohannesJo/CrH8a/

<body ng-app="app">
<div ng-controller='controller'>
            oConfigTerminal value= <input type="text" ng-model="oConfigTerminal"/><br><br>

    <div ng-show="!oConnection.aOptions"
    ng-repeat="oConnection in oFormOptions.aStationaryConnections">
        <label>
            <input type="radio" name="connection" ng-model="$parent.oConfigTerminal" value="{{oConnection.id}}"
            />{{oConnection.sId}}</label>
    </div>

</div>

app = angular.module('app', []);

app.controller('controller', function ($scope) {
$scope.oFormOptions = {};
$scope.oConfigTerminal=0;
$scope.oFormOptions.aStationaryConnections = [{
    id: 1,
    sId: "analog"
}, {
    id: 2,
    sId: "isdn"

}, {
    id: 3,
    sId: "dsl"
}];

// !!! Trying to set the default checked/selected value !!!
$scope.oConfigTerminal = $scope.oFormOptions.aStationaryConnections[0];
});

charlietfl · Accepted Answer · 2013-03-10 21:25:09Z

2

Inspect the live html in browser console and you will see that oConnection is an object and value of radio becomes: {"id":1,"sId":"analog"}. You probably want to use oConnection.id for value

One other issue within ng-repeat there is a scope inheritance issue that needs to be resolved for ng-model by setting ng-model to $parent.variableName

Your oConnectionTmpView didn't make any sense to me so for simplification I removed it:

HTML:

<div ng-show="!oConnection.aOptions" ng-repeat="oConnection in oFormOptions.aStationaryConnections">
  <label>
       <input type="radio"  
              name="connection" 
              ng-model="$parent.oConfigTerminal" 
               value="{{oConnection.id}}"
         />
           {{oConnection.sId}}
     </label>
 </div>

JS:

app = angular.module('app', []);

app.controller('controller', function ($scope) {
    $scope.oFormOptions = {};
    $scope.oConfigTerminal = 0;
    $scope.oFormOptions.aStationaryConnections = [{
        id: 1,
        sId: "analog"
    }, {
        id: 2,
        sId: "isdn"

    }, {
        id: 3,
        sId: "dsl"
    }];
}

Demo: http://jsfiddle.net/CrH8a/14/

answered Mar 10, 2013 at 21:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

hugo der hungrige Over a year ago

Sorry. jsfiddle keeps messing around with me.... I updated your fiddle to show you, what I'm trying to achieve: jsfiddle.net/JohannesJo/PQ7BR

hugo der hungrige Over a year ago

Youre a genius! If i set $scope.oConfigTerminal to 1 instead of 0 it works =)

charlietfl Over a year ago

here's another approach... watch the radio model and use it's value to set your object jsfiddle.net/PQ7BR/5

Collectives™ on Stack Overflow

Setting the default value for a radio inside of ng-repeat (angular-js)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related