Question

我正在尝试添加和删除按钮单击上的类。不幸的是我似乎没有做到这一点。无论我做什么，班级都不会改变。

以下是我要改变的内容;

<div ng-controller="navbarCollaspeCtrl">
<nav id="mainNav" class="navbar fixed-top navbar-expand-lg navbar-transparent">

<button class="navbar-dark navbar-toggler" ng-click="changeClass()" href="" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
</div>

这是Angular部分;

.controller('navbarCollaspeCtrl', ['$scope', '$element', function($scope, $element) {

$scope.changeClass = function() {

    var el = document.getElementById('mainNav');
    $element.removeClass(el, "navbar-transparent");
    $element.addClass(el, "navbar-primary");
    console.log(el);

}

}]）

＆navav-transparent不会被删除。并且navbar-primary永远不会被添加。有什么想法吗？

Answer 1

对于像这样的简单场景，没有必要像这样操纵DOM元素（这更像是jQueryish方法）。而是创建一个变量并绑定到它以切换样式。

<强> HTML

<nav id="mainNav" class="navbar fixed-top navbar-expand-lg" {{transparent ? 'navbar-transparent': ''}}">

<强> JS

var myApp = angular.module('myApp',[]);

myApp.controller('navbarCollaspeCtrl', ['$scope', '$element', function($scope, $element) {
   $scope.transparent = false;
}]);

您也可以使用ng-class指令。

AngularJS add / removeClass什么都不做？

1 个答案: