Как установить активный класс на ng-click?

У меня есть это:

<div class="account-item">
    <div class="account-heading" ng-class="active">
        <h4 class="account-title">
            <a href="#/Messages"  onclick="SetActiveAccountHeading(this);">
            7.    @Translate("SYSTEM_MESSAGES")</a>
        </h4>
    </div>
    </div>
    <div class="account-item">
       <div class="account-heading" ng-class="active">
           <h4 class="account-title">
              <a href="#/Info"  onclick="SetActiveAccountHeading(this);">
              7.    @Translate("SYSTEM_INFO")</a>
           </h4>
      </div>
   </div>

В angular у меня есть это:

$scope.active = "active";

но как я могу изменить это при щелчке, поэтому, если пользователь нажимает на меню, как только он будет активным, если снова щелкнуть его не будет?

ОТВЕТЫ

Ответ 1

Хорошо, у вас есть несколько пунктов меню, и вы хотите переключить класс по клику,

вы можете создать массив в контроллере, который представляет элементы меню как,

$scope.menuItems = ['Home', 'Contact', 'About', 'Other'];

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

$scope.activeMenu = $scope.menuItems[0];

создайте функцию для назначения выбранного значения меню, эта функция назначит $scope.activeMenu последний выбранный пункт меню.

 $scope.setActive = function(menuItem) {
    $scope.activeMenu = menuItem
 }

в HTML

пройдите через массив menuItems и создайте меню.

в элементе ng-class check last clicked, равном элементу в повторе.

если щелкнуть по меню, затем вызвать функцию setActive() в контроллере и передать имя элемента меню в качестве аргумента.

<div class="account-item" ng-repeat='item in menuItems'>
   <div class="account-heading" ng-class="{active : activeMenu === item}">
      <h4 class="account-title">
        <a href="#/Messages" ng-click="setActive(item)"> {{ item }}</a>
      </h4>
   </div>
</div>

здесь DEMO

здесь DEMO без ng-repeat

Ответ 2

Это то, что вам нужно.

<div class="account-item" ng-init="active = true">
  <div class="account-heading" ng-class="{'active': active === true}" ng-click="active = !active">
    <h4 class="account-title">
        <a href="#/Messages">7.    @Translate("SYSTEM_MESSAGES")</a>
    </h4>
  </div>
</div>

Никаких других скриптов. +1, если это помогает.

Ответ 3

Если вы используете [ ui-router], вам не нужно ничего писать, просто добавьте это свойство ui-sref-active = "active-menu" в ваш тег, который вы хотите активировать после нажатия/навигации.

Ответ 4

Для более чистого кода попробуйте следующее:

<div class="account-item" ng-init="active = true">
  <div class="account-heading" ng-class="{'active': active}">
    <h4 class="account-title">
        <a href="#/Messages" ng-click="active = !active">7. @Translate("SYSTEM_MESSAGES")</a>
    </h4>
  </div>
</div>


Вы можете удалить событие onclick SetActiveAccountHeading (this);.


Здесь ссылка JsFiddle.



Вы можете просмотреть результат в консоли разработчика .


Надеюсь, что это поможет.