时间戳

首页 > 解决方案 > 如何在Angularjs中突出显示选定的行

angularjs - 如何在Angularjs中突出显示选定的行

问题描述

在 AngularJS 中，当用户从“主页”转到“详细信息页面”时，我希望突出显示表中选定的行。

我尝试了下面的代码来满足我的要求，但它不起作用。

主页.html

<div ng-repeat="employee in employeeList">
<div class="panel panel-primary" ng-class="{'panel-success' : employee.id===selectedId}">
        <div class="panel-heading">
            <h3 class="panel-title">{{employee.name}}</h3>
        </div>
</div>
</div>

主页

routerApp.controller('EmployeeController', function ($scope, $state,dataService) {
   $scope.selectedId = dataService.getId();
    $scope.viewEmployee = function (employeeId) {
        $state.go('employeeDetails', { employeeId: employeeId });
    }
})

详情页

routerApp.controller('EmployeeDetailsController', function ($scope, $rootScope, $state,dataService) {
    $scope.goBack = function () {
      dataService.setId($stateParams.employeeId);
        $state.go('employeeList');
    }
})

服务

routerApp.service("dataService", function () {
    var employeeId;
    this.setId = function (id) {
        employeeId = id;
    }
    this.getId = function () {
        return employeeId;
    }
});

标签： angularjs

解决方案

无需在ng-class. 像这样重构。

<div class="panel panel-primary" ng-class="{'panel-success':employee.id===selectedId}">

推荐阅读