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

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

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

右侧视图：

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

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

{{selectedItem.type}:
{{selectedItem.price}
{{selectedItem.quantity}
...

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

非常简单

假设您有一个类

。选中的
，该类附加到活动的元素；然后，您可以修改HTML/Angular代码以使用
ng class
指令

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

你所尝试的是非常相似的，但它需要在这条轨道上。试试这段代码，它应该能工作
 一个选项是在您的
ng类中使用三元运算符检查
$scope.selectedItemid
是否未定义。如果
$scope.selectedItemid
未定义，请检查该项是否为重复中的第一项，属性为ng repeat：

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

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

$scope.selectedItem( itemList[0] );

您不应该这样做：“$scope.selectedItem=function（item）{”然后“$scope.selectedItem=item”；您应该将第一个重命名为$scope.selectItem=function（item）{在哪里添加ng if指令？我想@weirdpanda想说
ng class
。因为
ng if
没有意义。您不想隐藏/显示某些内容。很抱歉，我对两者有点混淆；我已经编辑了它，我希望现在有点清楚。这可以在默认情况下突出显示第一个并选择一个。如何在右侧显示第一个项目列表？如何获取该对象，因为默认情况下我没有调用selectIem（）函数？啊，我忽略了这一部分。是否有原因不初始化
$scope.selectedItem
，第一个索引为
itemList（）
？因为这将解决这两个问题。我在ng repeat中使用了此statemnet“itemList（）| filter:{status:itemType}”和itemList是从服务类调用的函数。我不确定如何从此itemList（）获取第一个对象，并且它具有不同的筛选器。是否有方法获取第一个对象？
$scope.selectedItem( itemList[0] );