ng-class 不会改变 class 除非我刷新页面

Question

在我看来，我正在使用 ng-class 来更改和元素的 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 中获取第二种货币，并将其与另一种货币进行比较，以确定应将哪种 class 分配给我的 li 元素。

现在的麻烦是，当有人点击link，URL发生变化时，赋值的class并没有发生变化。知道如何让 ng-class 分配的 class 在

时发生变化

Answer 1

你不需要为此调用函数，这可以很容易地内联实现

这样试试：

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

或

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

如果您使用的是 angular v.1.1.4+

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

Answer 2

制作ng-class= {'active': account.currency === currency}

在 css 文件中你应该有 .active{} class。并让非活动 class 成为默认行为。

P.S Dhaval 的答案也应该有效

Answer 3

试试这个，

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>

ng-class 不会改变 class 除非我刷新页面

ng-class does not change class unless I refresh the page

javascript

coffeescript

angularjs