如何默认选择第一个项目，然后在AngularJs中突出显示所选项目

Question

I am working on a app, that displays all items in left side and by default it should highlight the first item and show the item details in rightside view. when user clicks any item in the list it should highlight that item and show the selected item details in right side view.

here is my code (leftside 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 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 is displaying selected item, how to highlight first item and display first item details in right side view by default.then highlight the slected item and display selected item details.

Answer 1

Very simple.

Let's say you have a class .selected which is attached to the element which is active; then, you can modify your HTML/Angular code to use the ng-class directive.

ng-class="{selected: $index==0}"

What you've tried is pretty similar, but it needs to be on that track. Try this code and it should work.

Answer 2

One option would be to have a ternary operator in your ng-class checking to see if $scope.selectedItemid is undefined. If $scope.selectedItemid is undefined check to see if the item is the first in the repeat with $first property of ng-repeat:

ng-class="{'active':selectedItemid==undefined ? $first : selectedItemid === item.id}"

Answer 3

Assuming $scope.selectedItem works correctly for clicking, as you said it did, just call the function against the first item as part of the initialization of your control or immediately after loading of data. For example, at the bottom of your control file, or at the end of the function that loads data into itemList, call:

$scope.selectedItem( itemList[0] );