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

how to select first item by default and then highlight the selected item in AngularJs

本文关键字：项目 AngularJs 选项 显示 然后 何默认 默认 第一个 选择      更新时间：2023-09-26

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

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

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

目前，它正在显示选中的项目，如何在右侧视图中突出显示第一个项目并默认显示第一个项的详细信息。

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

$scope.selectedItem( itemList[0] );

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

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

非常简单。

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

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

你所尝试的是非常相似的，但它需要在那个轨道上。请尝试此代码，应该可以工作。

相关文章：