selecting radio button by default in angularjs application

Question

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.

Ionut Costica · Accepted Answer · 2015-12-11 16:16:52Z

2

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.

answered Dec 11, 2015 at 16:16

Ionut Costica

1,3921 gold badge9 silver badges19 bronze badges

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

2 Comments

Madasu K Over a year ago

default selection is working fine but after that if I change the radio button selection, "selectedItemDetails" is not reflecting the change.

Ionut Costica Over a year ago

It seems to be working with the solution you have now (replacing ng-model="selectedItemDetails" with ng-model="selectedItemDetails.selected" and possibly the above line of code with

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

. This is one of the reasons Angular best practices say that your ng-model should always contain a .(dot).

davidkonrad · Accepted Answer · 2015-12-11 16:18:30Z

1

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

answered Dec 11, 2015 at 16:18

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

2 Comments

Madasu K Over a year ago

But by default "Gety of House" was not getting set in the radio button even if I replace $scope.selectedItemDetails = { selected : null } with $scope.selectedItemDetails = { selected : { "subNum": 1222, "tagName": "Gety of House", "tagNum": 2, "slList": null } }

davidkonrad Over a year ago

@MadasuK - even if you have similar literals they are different objects! Use selected : $scope.itemList[index]. You are iterating over itemList with ngRepeat, so use references from itemList when you set the default selected radio button.

Collectives™ on Stack Overflow

selecting radio button by default in angularjs application

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related