javascript - 如何处理我类的点击事件

Question

我正在尝试向点击的元素添加一个类，并在用户点击其他元素时将其删除。

我有类似的东西

<li ng-repeat='test in tests' >
    <a href='' ng-click='pickTest($index, $event)'>{{test.title}}</a>
</li>

js

 $scope.pickTest = function(index, event) {
     $(event.target).addClass('blur');
     //this works when user clicks one of the <a> tags 
     //but I want to remove the class if user clicks another <a> tag
  };

我该怎么做？

谢谢!

Answer 1

您可以使用 ng-class 来确定是否需要根据特定条件附加该类。此外，在 ng-repeat 中使用 $index 确实不可取，因为在 ng-repeat 指令中应用过滤器时会造成问题。您可以创建两个函数，用于 ng-class 指令的 isActive() 和用于设置事件项的 setActive()。

angular.module('app', [])

  .controller('Ctrl', function($scope) {
  
    var activeTest = {};
  
    $scope.tests = [{
      title: 'Test 1'
    }, {
      title: 'Test 2'
    }, {
      title: 'Test 3'
    }, {
      title: 'Test 4'
    }];
  
    $scope.setActive = function(test) {
      activeTest = test;
    };
  
    $scope.isActive = function(test) {
      return angular.equals(activeTest, test);
    };
  
    	
  });

.blur {
  color: red;
}

<div ng-app="app" ng-controller="Ctrl">
  <ul>
    <li ng-repeat="test in tests">
      <a href="" ng-click="setActive(test)" ng-class="{blur: isActive(test)}">{{test.title}}</a>
    </li>      
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>