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

Question

我正在开发一个应用程序，该应用程序在左侧显示所有项目，默认情况下，它应突出显示第一个项目并在右侧视图中显示该项目的详细信息。 当用户单击列表中的任何项目时，应突出显示该项目并在右侧视图中显示所选项目的详细信息。

这是我的代码（左侧视图）：

<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>

在控制器中：

 $scope.selectedItem= function(item){
        $scope.selectedItem = item;        
        $scope.selectedItemid = item.id;       
   };

右侧视图：

            <div class="headersInfoRow2"> {{selectedItem.type}}:</div>
            <div class="headersInfoRow2"> {{selectedItem.price}}</div>
            <div class="headersInfoRow3"> {{selectedItem.quantity}}</div> 
 ...

...

当前，它会显示所选项目，默认情况下如何突出显示第一项并在右侧视图中显示第一项详细信息，然后突出显示选中的项目并显示所选项详细信息。

Answer 1

很简单。

假设您有一个.selected类，它连接到活动元素上； 然后，您可以修改HTML / Angular代码以使用ng-class指令。

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

您尝试过的内容非常相似，但必须遵循这一步。 试试这个代码，它应该可以工作。

Answer 2

一种选择是让ng-class的三元运算符检查$scope.selectedItemid是否未定义。 如果未定义$scope.selectedItemid ，请检查该项目是否是重复项中的第一个，并具有ng-repeat的$ first属性：

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

Answer 3

假设$ scope.selectedItem可以正确地单击，如您所说，只需在控件初始化的过程中或在加载数据后立即针对第一个项目调用函数。 例如，在控制文件的底部，或将数据加载到itemList的函数的末尾，调用：

$scope.selectedItem( itemList[0] );