Удалить класс AngularJS

Прошло некоторое время, чтобы найти ответ на этот вопрос, схватил несколько строк из другого образца кода, и он просто ошибся.Удалить класс AngularJS

Цель:

Нажмите кнопку> кнопка добавляет класс «активный» в дела. Внутри div.active есть еще один элемент с функцией, чтобы удалить .active из div.active

HTML:

<body ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
    <button ng-click="slidePanel='active'">Open Div 1</button> 
    <div class="div1" ng-class="slidePanel"> 
     <div class="close" ng-click="removeActive()">Close</div> 
     Hi I'm a Slide Panel 
    </div> 
    </div> 
</body>

JS:

angular.module('myApp', []) 
.controller('myCtrl', ['$scope', function ($scope) { 

$scope.removeActive = function() { 

    //Errors with Element is not defined 
    /*var myEl = angular.element(element.getElementsByClassName('div1')); 
    myEl.removeClass('active');*/ 


    //Errors with myEl.removeClass is not a function 
    var myEl = document.getElementsByClassName('div1'); 
    myEl.removeClass('active'); 

    //Errors with [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! 
    /*var myEl = angular.element('div1'); 
    myEl.removeClass('active');*/ 



    //Errors with Element is not defined 
    /*var query = element[0].querySelector('.div1'); 
    var wrappedQueryResult = angular.element(query); 
    query.removeClass('active');*/ 

} 
}]);

Не уверен, что я делаю неправильно Вот.

FIDDLE

источник

2015-09-25 Full-Hybrid

Если вы не хотите использовать объектную нотацию (которая будет моим предпочтительным методом), вы также можете просто установить slidePanel обратно в пустую строку, чтобы удалить класс.

<div class="close" ng-click="slidePanel=''">Close</div>

источник

2015-09-25 23:24:04

Используя эту проблему, проблема будет решена? – rajuGT

Просто попробовал, и это решает проблему. –

Решение проще, если вы используете синтаксис объекта для ng-class

<button ng-click="slidePanel=!slidePanel">Toggle Div 1</button> 
    <div class="div1" ng-class="{active:slidePanel}"> 
     <div class="close" ng-click="slidePanel=!slidePanel">Toggle</div> 
     Hi I'm a Slide Panel 
    </div>

манипуляции DOM не должно быть сделано в контроллере. Всегда думаю, что сфера применения первого, угловатый имеет огромный набор инструментов для управления РОМ на основе моделей области видимости

Что ng-class="{active:slidePanel} делает, переключив класс active на основе выражения slidePanel

DEMO

источник

2015-09-25 23:13:23 charlietfl

Проблема в том, что я не могу использовать 'ng-click =" slidePanel =! SlidePanel "' в этом конкретном экземпляре. Причина в том, что после нажатия этой кнопки div.active будет перемещаться сверху. Так нужна ли в этой ситуации индивидуальная директива? –

Я сделал это для упрощения кода, но это может быть функция, которая изменяет переменную области видимости или запускает событие или обновляет объект службы. – charlietfl

Удалить класс AngularJS

ответ

Смежные вопросы