Как написать функцию переключения jquery для значка (который генерируется из CSS) в Angularjs?

Question

У меня есть сценарий, где мне нужно свернуть нижний колонтитул в мобильном устройстве, я попытался с помощью медиа-запросов CSS и функции переключения jquery. Но мне нужно использовать angularjs.Я попробовал это с помощью ng-show / ng-hide.Но здесь '+' или '-' получается из css. Итак, как мне нужно дать действие щелчка для этих знаков. Функция щелчка должна быть задана динамически.

Сценарий:

$( ".widget h2" ).click(
    function() {
        $(this).parent().toggleClass('active');
    }
);  

Мне нужен вышеуказанный код в angularjs.

Вот мой Plunker

Заранее спасибо.

Answer 1

Вы можете использовать классы от ng-class до toggle css в зависимости от ваших условий. Я бы лично предложил избегать использования jquery в проектах angularjs. Для способов, как вы можете использовать ng-class,

Вы можете перейти на следующий блог

Answer 2

Вы можете использовать window.resize событие

$(window).resize(function() {
    $windowWidth = $(window).width();
    if ($windowWidth <= 479) {
        $('.widget').addClass('active');
    }
});

Вот ваш обновленный plunkr

Более улучшенная версия:

$(window).resize(function() {
    CheckWindowWidth();
});
$('.widget h2').click(function() {
    $(this)
        .parent()
        .toggleClass('active');
});

function CheckWindowWidth() {
    $windowWidth = $(window).width();
    if ($windowWidth <= 479) {
        $('.widget').addClass('active');
    }
}
CheckWindowWidth();

Редактировать : Согласно угловой версии вы можете использовать это

В вашем html-изменении

<div class="col-md-5 widget" ng-class="{'active': setSignInData }">
                <h2 ng-click="setSignInData = !setSignInData">sign in data</h2>
                <article class="widget_content">
                    <ul ng-class="autoScroll?'widget':'active widget'">
                        <li>Get a quote</li>
                        <li>Send quote</li>

                 </ul>
                 </article>
            </div>

В вашем контроллере

 $scope.setSignInData = false;

Это изменит переменную области и переключит активный класс