autoselect radio button selection using angular js with ng repeat

Question

I'm using angular js to display radio buttons and display info based on the selected radio button. I have list 1 and list2 both defined as radio buttons. When i select list1 option it should display 5 different items as radio buttons. Same for list2, when it's chosen 5 different items are displayed as radio buttons. when one of the items is selected it displays the info related to item.

when i select list1 and item3 within list1 then i switch to list2 i want the selection to be at item1 of list2 but what i get is list2 and item3 selected. How can I initialize the selection to list2 item1.

this is the html:

<div class="col-sm-12"><strong>Lists:</strong></div>

    <div class="col-sm-12">
       <input type="radio" name="list1" value="list1" checked="checked" ng-model="listSelected" ng-click="SelectOption('List1')">
        List1;

       <input type="radio" name="list2" value="list2" checked="checked" ng-model="listSelected" ng-click="SelectOption('List2')">
        List2;

        </div>

 <label ng-repeat="item in itemMetaData" id="Label2" cursor: pointer">
       input type="radio" name="item1" value="{{item.itemName}}" ng-model="itemName" ng-click="getitemsinfolist(item.itemName)">
          {{item.itemName}}
 </label>

I tried to do this but it didn't work:

 $scope.item.itemName = 'item1';

How can I do this?

Are you using different ng-models for both lists? Can you share complete snippet please? — Faraz Javed

astonTY astonTY · Accepted Answer · 2019-08-01T03:13:01

I think you can identify the lable using unique key to show the difference between the items in list1 and items in list2. when you change to list2, you can use the key to initialize the items which to be selected. The second way is you can show all the labels no matter labels belong to list1 or list2, you can just use a value to show or hidden the labels.

autoselect radio button selection using angular js with ng repeat

1 Answers