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

在我的网页中，我有两种语言：英语和印地语。默认情况下，我的页面将使用英语

当我点击印地语时，我想将活动类添加到具有

hin

id的

li

，并想删除具有

eng

id的

active

类

<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>

我试过了

<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>

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

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

---

如何使用AngularJS切换类？将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';

---

将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';

试试这个

<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>

或

myfunc=功能（项目）{
location.hash=项目；
$scope.selectedlang=项目；
var test={value:item，displayValue:''}；
c、 get（test）.then（function（）{
$window.location.reload（）；
})  

试试这个

<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>

或

myfunc=功能（项目）{
location.hash=项目；
$scope.selectedlang=项目；
var test={value:item，displayValue:''}；
c、 get（test）.then（function（）{
$window.location.reload（）；
})  

这里的问题是，每当刷新页面时，语言都会设置为默认语言“eng”。因此，请尝试将语言值存储在localstorage中，然后应用ng类

<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);
}) 

selectedTab=功能（项目）{
setItem（“selectedTab”，item）；
}) 

然后在页面refresh方法上获取这个locastorage值

---

希望这有帮助：）

这里的问题是，无论何时刷新页面，语言都会设置为默认语言“eng”。因此，请尝试将语言值存储在localstorage中，然后应用ng类

<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);
}) 

selectedTab=功能（项目）{
setItem（“selectedTab”，item）；
}) 

然后在页面refresh方法上获取这个locastorage值

---

希望这有帮助：）

您可以使用ng类添加该类，如下所示

<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>

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

此处，.active被添加到条件$index==selected的类列表中

要从列表中删除.active，请重置所选的

$scope.selected = -1

---

您可以使用ng类添加该类，如下所示

<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>

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

此处，.active被添加到条件$index==selected的类列表中

要从列表中删除.active，请重置所选的

$scope.selected = -1

---

---

您不应该在AngularJS（作为SPA）中刷新页面。否则，请在

localstorage

中保存任何更改。我可以使用jquery实现它吗？如果您刷新它，无论您选择什么，它都不会被保存use@AlekseySolovey即使我存储在

localstorage

中，页面刷新之前也会出现更改only@AlekseySolovey但是我无法在没有页面刷新的情况下将页面更改为其他语言您不是su以AngularJS（作为SPA）刷新页面。否则，请在

localstorage

中保存任何更改。我可以使用jquery实现它吗？如果您刷新它，无论您选择什么，它都不会被保存use@AlekseySolovey即使我存储在

localstorage

中，页面刷新之前也会出现更改only@AlekseySolovey但是我无法在没有页面刷新的情况下将页面更改为其他语言您太棒了！！…但我无法理解您的想法：-（…我需要在html和localstorage中更改任何内容吗？不，您不需要在html中执行任何操作。只需要在控制器中进行修改。在控制器中插入$window，第一行应该是

$scope.selectedlang=$window.localstorage.getItem（'lang'））| |“eng”

我不需要在html中添加ng类吗？html代码是正确的

但是在页面刷新后类会被删除，你很棒！！…但我不明白你的想法：-（…我需要在html和localstorage中更改任何内容吗？不，您不需要在html中执行任何操作。只需要在控制器中进行修改。在控制器中插入$window，第一行应该是

$scope.selectedlang=$window.localstorage.getItem（'lang'））| |“eng”；

我不需要在html中添加ng类吗？html代码是正确的>但是在页面刷新后类会被删除，你能告诉我，你是如何设置默认语言的吗？我能在页面刷新后在

onload'上添加
active
class而不是在
ng中添加它吗？单击“是的，你也可以这样做。你能告诉我，你是如何设置默认语言的吗？我能在
onlo>上添加
active
class吗广告“一旦页面刷新而不是在
ng中刷新，请单击“是的，您也可以这样做。”