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的函数末尾，请调用：

<ul data-bind="foreach: { data: categories, as: 'category' }">
    <li>
        <ul data-bind="foreach: { data: items, as: 'item' }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
            </li>
        </ul>
    </li>
</ul>

<script>
var viewModel = {
    categories: ko.observableArray([
        { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
        { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }
    ])
};
ko.applyBindings(viewModel);
</script>

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

3 个答案: