在angularjs中单击时如何激活html元素？

Question

当我单击任何html元素时，我希望它保持活动状态，请参见演示。在以下演示中，如果我单击了任何不活动的html，则它将变为活动状态，反之亦然。
演示

  <div class="wrapper col-md-12 col-sm-12">
    <a title="week? category" ng-model="week" class="tag">week</a>
    <a title="week? category" ng-model="month" class="tag">month</a>
    <a title="week? category"  ng-model="year" class="tag">year</a>
  </div>

Answer 1

基本思想是拥有一个范围变量，该变量将保存单击哪个按钮（通过ng-click属性），并有条件地将css类（通过ng-class属性）分配给匹配的链接。

HTML文件：

<div ng-app="myApp" ng-controller="myCtrl as vm">
  <div class="wrapper col-md-12 col-sm-12">
    <!-- 
         when you click the link, it will set $scope.type to the define type
         ('week' in the first case), 
         we then compare $scope.type with some hardcoded value to set the
         class and change the css properties accordingly) 
         Of course, you could extract this to a $scope method
    -->
    <a title="week? category" ng-class="{active: vm.type=='week'}" ng-click="vm.type = 'week'" class="tag">week</a>
    <a title="week? category" ng-class="{active: vm.type=='month'}" ng-click="vm.type = 'month'" class="tag">month</a>
    <a title="week? category"  ng-class="{active: vm.type=='year'}" ng-click="vm.type = 'year'" class="tag">year</a>
  </div>
</div>

Javascript：

app.controller('myCtrl', function($scope) {
    $scope.type = null;
});

CSS（对于active类）：

.tag:hover, .active {
  background-color: red;
  border-color: red;
}

参见分叉的plknr

Answer 2

您应该使用ng-class在点击时在DOM中设置一个类，因此还需要使用ng-click调用函数来设置活动菜单。 无需在锚标记中使用ng-model 。

可以尝试一下

在HTML中：

<div ng-app="myApp" ng-controller="myCtrl">
      <div class="wrapper col-md-12 col-sm-12">
        <a title="week? category"  class="tag" ng-class="{selected:selectedType == 'week'}" ng-click="makeActive('week')">week</a>
        <a title="week? category"  class="tag" ng-class="{selected:selectedType == 'month'}" ng-click="makeActive('month')">month</a>
        <a title="week? category"  class="tag" ng-class="{selected:selectedType == 'year'}" ng-click="makeActive('year')">year</a>
      </div>
    </div>

在控制器中：

$scope.selectedType= '' ;// initially empty 

$scope.makeActive = function(getName) {
   $scope.selectedType = getName;
}

并在CSS中：添加另一个选定的类

.tag:hover, .selected {
      background-color: red;
      border-color: red;
 }