Geek Answers Handbook

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

How to set the default value for radio stations if this value is an object, not a string?

EDIT:

To make things clearer, I updated the fiddle: Look at 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]; });
+4
source share
1 answer

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

Another problem in ng-repeat there is a scope inheritance problem that should be resolved for ng-model by setting ng-model to $parent.variableName

Your oConnectionTmpView made no sense to me, so for simplicity I deleted 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/

+2
source

More articles:


All Articles