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

Question

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

0

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

Цель:

Нажмите кнопку "Кнопка", добавив класс "active" в div. Внутри div.active есть еще один элемент с функцией для удаления.active from 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

Full-Hybrid 26 сен. 2015, в 01:35

Источник

Теги:

javascript

angularjs

2 ответа

1

Решение проще, если вы используете синтаксис объекта для 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-манипуляция не должна выполняться в контроллере. Всегда думайте о перспективе во-первых, угловой имеет огромный набор инструментов для управления dom, основанный на моделях масштаба

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

DEMO

charlietfl 25 сен. 2015, в 21:27

0

Проблема в том, что я не могу использовать ng-click="slidePanel=!slidePanel" в данном конкретном случае. Причина в том, что, как только вы нажмете эту кнопку, div.active будет скользить сверху. Так нужна ли в этой ситуации специальная директива?
Full-Hybrid 25 сен. 2015, в 23:16
0

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

Ещё вопросы

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

Matthew Clise · Accepted Answer · 2015-09-25T21-05-00.000Z

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

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

Используя это, проблема будет решена?
Только что попробовал, и это решает проблему.