AngularJS: Как динамически обновить условие в ng-классе, чтобы применить стиль CSS

Question

У меня есть элемент строки таблицы HTML (tr) с ассоциированным с ним классом ng. «Активный» класс - это стиль CSS, который выделяет строку таблицы. Существует условие (selRole == роль), указывающее, что выбранная роль должна быть выделена.

#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. Этот оператор этого не делает (см. Как определить равенство для двух объектов JavaScript? ).

То, что происходит выше, это когда ваш список загружается впервые, вы получаете List1 элементов и выбираете конкретный объект в List1, скажем, List1Item, чтобы быть $scope.selRole. Поскольку эти два объекта являются одним и тем же экземпляром, $scope.selRole == List1Item будет иметь значение TRUE, и ваш класс ng будет работать.

Когда вы «обновляете» список предметов, я предполагаю, что вы создаете новые объекты для List2. Теперь, даже если List1Item соответствует всем свойствам List2Item, $scope.selRole == List2Item всегда будет ложным, поскольку они не являются одним и тем же объектом, и ng-класс не будет работать, пока $scope.selRole не станет List2Item.

Здесь есть два решения:

1. Если у вас есть уникальный идентификатор для каждой роли, вы можете использовать ng-class="{'active':selRole.Id == role.Id}"

2. Если у вас нет уникального идентификатора, вы можете реализовать функцию $scope.roleIsSelected(role) scope и использовать ее для проверки на равенство. Тогда ng-class="{'active':roleIsSelected(role)}" оценит правильно.