ng-class не изменяет класс, если я не обновляю страницу

Я использую ng-класс в своем представлении, чтобы изменить класс и элемент, и он отлично работает при загрузке страницы. Вот мой код:

<ul>
  <li ng-class="'{{account.currency}}' == '{{currency}}' ? 'active': 'inactive'" ng-repeat="account in accounts" bind="accounts">
    <a href="#/deposits/{{account.currency}}" ng-click="changeClass('{{account.currency}}', '{{currency}}')">
    {{currency}}
    </a>
  </li>
<ul>

Как вы можете видеть, он берет вторую валюту из URL-адреса и сравнивает ее с другим, чтобы определить, какой класс он должен назначить моему элементу li.

Проблема в том, что когда кто-то нажимает на ссылку и изменяется URL-адрес, назначенный класс не изменяется. Любая идея, как я могу получить класс, назначенный ng-классом, изменить, когда

javascript,angularjs,coffeescript,

0

Ответов: 3

2 принят

Попробуй это,

var app = angular.module('app', []);

app.controller('myctrl', function() {
  var vm = this;
  vm.accounts = [{
    currency: 'Doller'
  }, {
    currency: 'Pound'
  }, {
    currency: 'Euro'
  }];
  
  vm.changeClass = function(account) {
    vm.active = account.currency;  
  }
});
.active {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
  <div ng-app="app" ng-controller="myctrl as ct">
    <ul>
      <li ng-class="{'active': ct.active === account.currency}" ng-repeat="account in ct.accounts">
        <a href="#" ng-click="ct.changeClass(account)">
          {{account.currency}}
        </a>
      </li>
    </ul>
  </div>

</body>

3

Вам не нужно вызывать функцию для этого, это может быть легко достигнуто встроенным

попробуйте вот так:

<li ng-class="{'active' : account.currency == currency, 'inactive': 
account.currency != currency}">

ИЛИ

<li ng-class="{true: 'active', false: 'inactive'}[account.currency == currency]">

Если вы используете угловой v.1.1.4 +

<li ng-class="account.currency == currency ? 'active': 'inactive'}">
2

Сделать ng-class= {'active': account.currency === currency}

в файле css у вас должен быть .active{}класс. И пусть неактивный класс будет по умолчанию.

PS Ответы Дхавала должны работать также

JavaScript, angularjs, CoffeeScript,
Похожие вопросы
Яндекс.Метрика