Question

在我的网页中，我有2种语言英语和印地语。默认情况下，我的页面为英文。

当我单击印地语时，我想向具有li id的hin添加活动类，并希望删除具有active id的eng类。

<li class="lang active" id="eng">
  <a href="" ng-click="myfunc('eng');">ENG </a>
</li>
<li class="lang" id="hin">
  <a href="" ng-click="myfunc('hin');">HIN </a>
</li>

每当我更改语言时，页面就会刷新。页面刷新后，我需要这些更改

myfunc = function(item) {
  $scope.selectedlang = item;           
  var test = {value: item, displayValue: ''};
  c.server.get(test).then(function() {          
    $window.location.reload();      
  })

我尝试过这样。

<li ng-class="{'active':selectedTab === 'eng'}" ng-click="selectedTab = 'eng'">
  <a href="#eng">english</a>
</li>
<li ng-class="{'active':selectedTab === 'hin'}" ng-click="selectedTab = 'hin'">
  <a href="#hin">hindi</a>
</li>

但是这些更改在页面刷新后不会出现。

如何使用AngularJS切换类？

Answer 1

将selectedTab值存储在本地存储中，而不是刷新页面。重新加载页面后，从本地存储获取价值并分配给selectedlang。

myfunc = function (item) {
    $scope.selectedlang = item;
    $window.localStorage.setItem('lang', item);
    var test = {
        value: item,
        displayValue: ''
    };
    c.server.get(test).then(function () {
        $window.location.reload();

    });
}

// On page load
$scope.selectedlang = $window.localStorage.getItem('lang') || 'eng';

Answer 2

尝试

<li ng-class="{'active':location.hash == '#eng'}"><a href="#eng" >english</a>
</li>
<li ng-class="{'active':location.hash == '#hin'}"><a href="#hin" >hindi</a>
</li>

或

<li ng-class="{'active':location.hash == '#eng'}" id="eng">
  <a href="" ng-click="myfunc('eng');">ENG </a>
</li>
<li ng-class="{'active':location.hash == '#hin'}" id="hin">
  <a href="" ng-click="myfunc('hin');">HIN </a>
</li>


myfunc = function(item) {
  location.hash = item;
  $scope.selectedlang = item;           
  var test = {value: item, displayValue: ''};
  c.server.get(test).then(function() {          
    $window.location.reload();      
  })

Answer 3

这里的问题是，每当刷新页面时，语言就会设置为默认语言'eng'。因此，请尝试将语言值存储在本地存储中，然后应用ng-class。

<li ng-class="{'active':selectedTab == 'eng'}" ng-click="selectedTab('en')">
 <a href="#eng">english</a>
 </li>
<li ng-class="{'active':selectedTab == 'hin'}" ng-click="selectedTab('hin')">
<a href="#hin">hindi</a>
</li>


selectedTab= function(item) {
    localStorage.setItem("selectedTab",item);
})

然后在页面Referh方法中获得此locastorage值。

希望这会有所帮助：）

Answer 4

您可以像这样使用ng-class添加类。

 ng-class="{active: $index == selected}"

在这里，.active在$ index == selected条件下添加到类列表中

并从列表中删除.active，请重置选定的对象

$scope.selected = -1

如何动态添加和删除活动类

4 个答案: