Добавление класса из контроллера в AngularJS

Question

Добавление класса из контроллера в AngularJS

0

Im создает простое меню в Angular:

<ion-nav-view name="section"></ion-nav-view>
<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ng-click="menuClick(1)">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ng-click="menuClick(2)">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ng-click="menuClick(3)">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

Контроллер, который обрабатывает это представление:

app.controller('menu', function ($scope, $state) {
    $scope.menuClick = function(btn) {
        if(btn == 1) {
            $state.go('app.lists');
        }
        else if(btn == 2)
            $state.go('app.pay');

    }
});

Как добавить класс к нажатой кнопке?

DomingoSL 05 сен. 2016, в 16:28

Источник

Теги:

ionic-framework

angularjs

3 ответа

0

Немного больше типа jQuery-ish, но лучше, если вам не нужно загромождать переменную $scope только для добавления (или переключения) классов css.

При вызове функции в ng-click имеется неявная переменная $event передаваемая функции, называемой (ссылка угловых документов), которая является объектом MouseEvent.

Вы можете получить доступ к элементу с помощью target свойства MouseEvent.target а затем выполнить функцию jQuery для управления классами в элементе DOM.

например:

<div ng-click="clickHandler($event);"></div>

$scope.clickHandler = function($event) {
  var element = $($event.target);

  element.toggleClass('clicked');
}

korun 05 сен. 2016, в 14:01

0

Вопрос был о вкладках, ваш пример переключает класс на один элемент.
Kindzoku 05 сен. 2016, в 15:11
0

Этот ответ является общим в отношении вопроса последнего предложения - «Как добавить класс к только что нажатой кнопке?»
korun 05 сен. 2016, в 15:15

0

Я немного читал об ионном навигаторе, и, похоже, он использует библиотеку ui-router. Поэтому вы можете попытаться использовать:

<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ui-sref="path.to.state1" ui-sref-active="class name if in state">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ui-sref="path.to.state2" ui-sref-active="class name if in state">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ui-sref="path.to.state3" ui-sref-active="class name if in state">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

ui-sref - создает ссылку для состояния

ui-sref-active - класс, который будет добавлен, если вы находитесь в этом состоянии.

Единственное правильное решение - прикрепить ваши кнопки к состоянию.

В качестве альтернативы вы можете сделать что-то вроде:

$ scope. $ state = $ state; <- в вашем контроллере. Вы должны поделиться объектом $ state с вашим представлением.

<div class="tabs">
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state1')}" ng-click="menuClick(1)">
        <i class="icon ion-home"></i>
        Test
    </a>
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state2')}" ng-click="menuClick(2)">
        <i class="icon ion-star"></i>
        Favorites
    </a>
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state3')}" ng-click="menuClick(3)">
        <i class="icon ion-gear-a"></i>
        Settings
    </a>
</div>

Kindzoku 05 сен. 2016, в 12:16

Ещё вопросы

Вопрос был о вкладках, ваш пример переключает класс на один элемент.
Этот ответ является общим в отношении вопроса последнего предложения - «Как добавить класс к только что нажатой кнопке?»

Andurit · Accepted Answer · 2016-09-05T12-23-00.000Z

Я бы сказал, что самым простым способом для этого является сделать дополнительный переменный как $scope.pressed в области $scope и использовать ng-class в шаблоне

И код должен выглядеть так:

$scope.menuClick = function(btn) {
   $scope.pressed = btn;
   if(btn == 1) {
       $state.go('app.lists');
   }
   else if(btn == 2)
       $state.go('app.pay');
}

и HTML будет выглядеть так:

<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ng-click="menuClick(1)" ng-class="pressed === 1 ? 'your new class' : ''">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ng-click="menuClick(2)" ng-class="pressed === 2 ? 'your new class' : ''">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ng-click="menuClick(3)" ng-class="pressed === 3 ? 'your new class' : ''">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>