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

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

<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 и сравнивает его с другим, чтобы решить, какой класс он должен назначить мой Lī элемент.

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

источник

2016-10-13 user1227793

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

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>

источник

2016-10-13 17:46:05 ram1993

Спасибо за это. Я действительно не могу изменить это, чтобы заставить его работать с моим существующим кодом, потому что я использовал настраиваемую директиву. Мой код выглядит так: – user1227793

Можете ли вы предоставить скрипт или директивный код? – ram1993

На самом деле это сработало. Я просто заменил vm областью. Большое спасибо. пусть ветер всегда будет у вас в спине. – user1227793

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

попробовать так:

<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'}">

источник

2016-10-13 13:41:10

Спасибо за этот кончик. Я следовал за вашим предложением и ввел свой код в строку. Но проблема все еще сохраняется. – user1227793

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

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

P.S Ответы Dhaval должны работать также

источник

2016-10-13 15:15:25

Хотя это еще одна альтернатива, которая работает, она не решает проблему. Проблема в том, что, когда я нажимаю на ссылку, класс «active» должен быть удален из старого активного элемента и назначен новому активному элементу, и это делает не произойдет. Есть ли способ, которым я могу автоматически изменить класс, который находится на элементе, когда я нажимаю на ссылку? – user1227793

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

ответ

Смежные вопросы