Question

我有一个与ng-class相关联的HTML表格行元素（tr）。 “活动”类是CSS样式，用于突出显示表格行。有一个条件（selRole == role）表示必须突出显示所选角色。

#rolesTable tr.active td {
color: #ffffff;
background-color: #2a9fd6;
}


<tr ng-class="{'active':selRole==role}" ng-click="setCurrentRole(role)" ng-repeat="role in roles">
   <td>{{ role.Name }}</td>
</tr>

$scope.setCurrentRole = function (role) {
        $scope.selRole = role;
        $scope.permissions = role.Permissions;
        $scope.selPermission = null;
        $scope.selRoleIndex = $scope.roles.indexOf(role);
    }

现在，当我单击一行时，它会更改颜色以表示我已选择它。

我的问题是，有时我需要刷新表中的角色列表。 selRole属性保持其值，但是当我刷新列表时，我丢失了突出显示。

即使我强制代码执行setCurrentRole函数，它也不会自动突出显示。我明确需要单击它以突出显示它。

即使刷新列表，我也需要使所选角色保持突出显示。我不知道如何在AngularJS中做到这一点。

Answer 1

编辑：问题实际上似乎是在使用==检查javascript中2个对象之间的相等性。该运算符不执行此操作（请参见How to determine equality for two JavaScript objects?）。

上面发生的事情是，当您的列表首次加载时，您获得List1个项目，然后在List1中选择一个特定的对象，假设List1Item为{{1} }。由于这两个对象是相同的实例，因此$scope.selRole的计算结果为TRUE，并且ng类将起作用。

当您“刷新”项目列表时，我假设您正在为$scope.selRole == List1Item创建新对象。现在，即使List2与List1Item的所有属性都匹配，List2Item也将始终为false，因为它们不是同一对象，并且ng-class直到{{1} }变成$scope.selRole == List2Item。

这里有两种解决方案：

如果每个角色都有唯一的ID，则可以使用$scope.selRole
如果没有唯一ID，则可以实现List2Item范围函数，并使用该函数检查是否相等。然后ng-class="{'active':selRole.Id == role.Id}"将正确评估。

AngularJS：如何在ng-class中动态更新条件以应用CSS样式

1 个答案: