I am currently developing an app that showcases a list of items on the left side. By default, the first item is highlighted and its details are displayed on the right side. When a user clicks on any item in the list, that item should be highlighted and its details shown on the right side view.
Below is the code for the left side view:
<div ng-repeat="item in itemList()| filter:{status: itemType}">
<div id="itemRow" ng-click="selectedItem(item)" ng-class="{'active':selectedItemid === item.id}">
<div id="itemRowContent">
<div id="itemName" class="appFont"><b>{{item.name}}</b></div>
</div>
</div>
</div>
In the controller:
$scope.selectedItem= function(item){
$scope.selectedItem = item;
$scope.selectedItemid = item.id;
};
Right side view:
<div class="headersInfoRow2"> {{selectedItem.type}}:</div>
<div class="headersInfoRow2"> {{selectedItem.price}}</div>
<div class="headersInfoRow3"> {{selectedItem.quantity}}</div>
...
...
Currently, it displays the selected item. How can I set it to highlight the first item and display its details on the right side view by default, and then highlight the selected item with its details?