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

Question

Я создаю простое меню в 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');

    }
});

Как я могу добавить класс к только что нажатой кнопке?

angularjs ionic-framework

0

DomingoSL 5 Сен 2016 в 17:09

Answer 1

Я бы сказал, что самый простой способ сделать это - сделать дополнительную переменную, например $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>

1

Andurit 5 Сен 2016 в 14:27

Answer 2

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

При вызове функции в ng-click в вызываемую функцию передается неявная переменная $event (справочник по документации по angular), который является MouseEvent < / a> объект.

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

Пример:

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

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

  element.toggleClass('clicked');
}

0

korun 5 Сен 2016 в 15:06

Answer 3

Я немного читал об ion-nav, и, похоже, он использует библиотеку 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>

0

Kindzoku 5 Сен 2016 в 15:16

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

3 ответа

Похожие вопросы

Новые вопросы

angularjs