Question

我在考虑如何更改类并在用户选择语言时添加HTML（请参阅下面的代码）

<li>
 <a ng-click="changeLanguage('en')">English</a>
</li>

这样的事情：

<li>
 <a ng-click="changeLanguage('en')" class="active">English
  <span class="icon icon-tick"></span>
 </a>
</li>

我的第一个想法是添加类似$ scope.active的东西，然后使用ng-class

ng-class="{'active': active, '': !active}"

但是这不适用于下面的HTML，我也不确定它是否适用于我的班级。

有人可以告诉我如何在Angular中做这样的事情吗？感谢

编辑：我不是特定的enaugh，我有更多的语言选项，所以HTML看起来像：

              <ul class="reset">
                    <li>
                        <a ng-click="changeLanguage('en')">English</a>
                    </li>
                    <li>
                        <a ng-click="changeLanguage('cs')" class="active">
                            Česky
                            <span class="icon icon-tick"></span>
                        </a>
                    </li>
                </ul>

在哪里＆＃34; CS＆＃34;当某种语言处于活动状态时它应该总是如此，EN是当该语言不活跃时它应该是什么样子

Answer 1

您需要做的是存储当前有效的选择，然后更改您的html角度代码以进行检查，如下所示：

＆＃13;

var app = angular.module("myApp", []);
app.controller("test", function($scope) {
  $scope.currentActive = "en";
  $scope.active = function(lang) {
    return lang == $scope.currentActive;
  }
  $scope.changeLanguage = function(lang) {
    $scope.currentActive = lang;
  }
});

＆＃13;

.active {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="test">
  <li>
    <a ng-click="changeLanguage('en')" ng-class="{ 'active': active('en') }">English
    <span ng-show="active('en')" class="icon icon-tick">Tick</span>
   </a>
  </li>
  <li>
    <a ng-click="changeLanguage('cs')" ng-class="{ 'active': active('cs') }">
      Česky
      <span ng-show="active('cs')" class="icon icon-tick">Tick</span>
    </a>
  </li>
</div>

＆＃13;

Answer 2

你可以使用jQuery来做到这一点。

$("a").click(function(){
    $(this).attr("class","active");
});

Answer 3

试试这个：

<li>
<a ng-click="changeLanguage('en')" ng-class="isActive">English
<span class="icon icon-tick" ></span>
</a>
</li>

在你的函数$ scope.changeLanguage中，添加：

$scope.isActive = 'active';

编辑：使用：

<li>
 <a ng-click="changeLanguage('en')" ng-class="{'active': currentLang =='en'}">English
  <ng-show="currentLang == 'en'" span class="icon icon-tick" ></span>
 </a>
</li><li>
 <a ng-click="changeLanguage('cs')" ng-class="{'active': currentLang =='cs'}">English
  <ng-show="currentLang == 'cs'" span class="icon icon-tick" ></span>
 </a>
</li>

在你的函数$ scope.changeLanguage中，添加：

$scope.currentLang = your_function_param;

Answer 4

您也可以直接使用currentActive === 'cs'

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="test">
  <li>
    <a ng-click="changeLanguage('en')" ng-class="{ 'active': currentActive === 'en' }">English
    <span ng-show="active('en')" class="icon icon-tick">Tick</span>
   </a>
  </li>
  <li>
    <a ng-click="changeLanguage('cs')" ng-class="{ 'active': currentActive === 'cs' }">
      Česky
      <span ng-show="currentActive === 'cs'" class="icon icon-tick">Tick</span>
    </a>
  </li>
</div>

＆＃13;

Answer 5

不建议在角度控制器中操作dom。可能你已经可以使用ng-if的范围了

Angular - 如果用户单击ELEMENT，如何添加HTML元素和更改类

5 个答案: