CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Madasu K
Madasu K

Reputation: 1863

selecting radio button by default in angularjs application

Please find the plunker for radio buttons. I am expecting when I select radio button, the selected object from $scope.itemList to be assigned to selectedItemDetails but it is not happening. And also by default when the page loads I want the default radio button to be selected based on var tagNumTobeSelectedByDefault = 2; i.e., "Gety of House" to be selected by default, how can I do it?

I am getting the index of the object to be selected from the list as follows:

var indexObjectTobeSet = $scope.itemList.map(function(x) {
    return x.tagNum;
}).indexOf(tagNumTobeSelectedByDefault);

But failing to set that particular radio button.

Upvotes: 1

Views: 281

Answers (2)

davidkonrad
davidkonrad

Reputation: 85588

When you are declaring selectedItemDetails as an empty literal {}, you do not have a specific binding. Declare a property the ng-model can attach to :

$scope.selectedItemDetails = { selected : null }

and 

<input type="radio" ng-model="selectedItemDetails.selected" name="eachCat" data-ng-value="eachCat">

Then it works. Now you can also set the default selected radio item with 

$scope.selectedItemDetails = { selected : $scope.itemList[3]  }

http://plnkr.co/edit/9hVxlhzvCmx3PIsbImVD?p=preview

Upvotes: 1

Ionut Costica
Ionut Costica

Reputation: 1392

You don't set the index, you set selectedItemDetails' value to the actual object you want selected in the $scope.itemList array. Thus,

$scope.selectedItemDetails = $scope.itemList.filter(function(item) { return item.tagNum === tagNumTobeSelectedByDefault; })[0];

should work (just remember to put it after the $scope.itemList definition). You might even want to consider moving the itemList object into a service or constant.

Upvotes: 2

Related Questions