Question

如果我有2个div（为简单起见，删除了ng-click功能）

<div ng-class="{selected: header.type == 'percent'}" data-type="percent"></div>
<div ng-class="{selected: header.type == 'invisible'}" data-type="invisible"></div>

这会将.selected类应用于其中一个div，具体取决于$ scope.header.type的值

但是，当我点击没有.selected类的div时，我也有它，我从拥有它的div中删除所选类，并将其应用于刚刚单击的div。

现在，在控制器上，如何获取具有.selected类的div的数据类型？

基本上我正在尝试设置$ scope.header.type来保存具有.selected类的div的数据类型的值

以防万一需要，这里是ng-click fn（不是像角一样，但我找不到替代品）

$scope.changeOfferbox = function($event) {
    var selected  = angular.element(document.querySelector('.selected'))
    selected.removeClass('selected')
    var clicked = angular.element($event.target).addClass('selected')
}

Answer 1

一个简单的解决方案可能是将数据类型传递给您的点击功能;这样，您实际上甚至不需要手动添加/删除类，当header.type更改时，ng-class指令将自动更新：

$scope.changeOfferbox = function($event, localType) {
    if (localType !== $scope.header.type) {
        $scope.header.type = localType;
    }
};

<div ng-class="{selected: header.type == 'invisible'}" ng-click="changeOfferbox('invisible');" data-type="invisible"></div>

将范围变量与非表单元素一起使用

1 个答案: