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

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

周
月
年

基本思想是使用一个范围变量保存单击的按钮（通过

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>

Css（对于

活动的
类）：

请参见您应该使用
ng class
在单击时在DOM中设置类，因此还需要使用
ng click
调用函数来设置活动菜单。无需在锚定标签中使用
ng型号

我可以试试

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

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

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

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

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

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