data is not bound with ng-repeat in radio input in angular js?

Question

HTML:

<div ng-app="myApp" ng-controller="myCtrl">       
  <label ng-repeat="x in list">
    <input type="radio" ng-model="test" value="x" >{{x}} 
  </label>   
  <br>
  Exec type: {{test}}   
</div>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { 
$scope.list = ["xxx", "yyyy"];
  $scope.test = "";
});

JS Fiddle: http://jsfiddle.net/0ku4jvsn/5/

Nothing is bound with $scope.test. This line: Exec type: {{test}} is showing nothing.

Mike Vranckx · Accepted Answer · 2015-08-21 11:14:02Z

3

You should use $parent.test when you bind your ng-model because you are in a ng-repeat

<label ng-repeat="x in list">
    <input type="radio" ng-model="$parent.test" value="{{ x }}" >{{x}} 
</label>

To selected a default value, just assign your model with your desired value

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

app.controller('myCtrl', function($scope) { 
    $scope.list = ["xxx", "yyyy"];
    $scope.test = $scope.list[0];
});

https://jsfiddle.net/0ku4jvsn/6/

edited Aug 21, 2015 at 11:14

answered Aug 21, 2015 at 10:16

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

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

1 Comment

Dev Over a year ago

how can I make "xxx" by default selected ?

Collectives™ on Stack Overflow

data is not bound with ng-repeat in radio input in angular js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related