在AngularJS中突出显示选定行可以通过以下步骤实现:
<table>
<tr ng-repeat="item in items" ng-click="selectRow(item)" ng-class="{ 'selected': item.isSelected }">
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
selectRow
函数来处理行的选中状态。该函数将在行被点击时触发,并将选中的行标记为isSelected
为true
,其他行的isSelected
为false
。例如:app.controller('MyController', function($scope) {
$scope.items = [
{ name: 'Item 1', description: 'Description 1', isSelected: false },
{ name: 'Item 2', description: 'Description 2', isSelected: false },
{ name: 'Item 3', description: 'Description 3', isSelected: false }
];
$scope.selectRow = function(item) {
angular.forEach($scope.items, function(item) {
item.isSelected = false;
});
item.isSelected = true;
};
});
.selected
类来突出显示选中的行。例如:.selected {
background-color: yellow;
}
通过以上步骤,当用户点击某一行时,该行将突出显示为黄色背景,其他行则恢复为默认样式。这样可以实现在AngularJS中突出显示选定行的效果。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云