用于锚标签的 Angularjs ng-click-active 类答案

【问题标题】：Angularjs ng-click-active class for anchor tags用于锚标签的 Angularjs ng-click-active 类
【发布时间】：2013-08-11 06:52:56
【问题描述】：

我想在我的应用中点击链接时应用一些样式。

如果我要使用ng-click，那么它会为元素添加一个ng-click-active 类，这很棒，但是有没有办法从锚标记中获得相同的行为？

理想情况下，如果我有这个标记：

<ul class="menu">
  <li>
    <a href="#/item1">Item 1</a>
  </li>
  <li>
    <a href="#/item2">Item 2</a>
  </li>

我可以这样设计：

.menu a.ng-click-active {
  background-color: #fff;
}

【问题讨论】：

为什么不使用伪类：.menu a:active { background-color: #fff; }？
你可以这样做：ng-href="{{}}"，或者href ng-click=""
@Stewie 当然！！想太多了……你能把它作为答案，我可以接受吗？

标签： css angularjs

【解决方案1】：

只需使用标准伪类来设置锚标签上的活动状态样式：

.menu a.ng-click-active, 
.menu a:active {
  background-color: #fff;
}

【讨论】：

【解决方案2】：

您的问题有点含糊，但通常您可以使用 ng-class 有条件地将分类应用于您的元素您可以定义一个 $scope 属性，该属性定义何时或何时不将 ng-class 应用于元素示例：

<html ng-app>
 <head>
  <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
 </head>
 <body>
  <input type="button" value="set" ng-click="myVar='my-class'">
  <input type="button" value="clear" ng-click="myVar=''">
  <br>
  <span ng-class="myVar">Sample Text</span>
 </body>
</html>

你不妨看看this 发帖

【讨论】：