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来确定是否需要根据特定条件追加类。此外，在$index中使用ng-repeat确实不可取，因为在ng-repeat指令中应用过滤器时会出现问题。您可以为isActive()指令创建两个函数ng-class，并为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>

Answer 2

使用ng-class，如下所示：

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

请注意，您不需要在函数内部将blurActive设置为true，因为ng-repeat会为每个“重复项目”创建一个新范围，因此您可以将其设置为在同一个{ {1}}，在调用函数之后，函数的逻辑将不会与设计混合在一起。

Answer 3

在控制器中执行DOM操作被认为是不好的做法，您可以使用ng-class实现这种角度方式： -

   <li ng-repeat="test in tests">
       <a href="#" ng-click="pickTest($index, $event)" 
            ng-class="{'blur': opt.selectedIdx == $index}">{{test.title}}</a>
   </li>

在您的控制器中，只需： -

$scope.opt = {}; //Set an initial value in your controller

$scope.pickTest = function(index, $event) { 
     $event.preventDefault(); //If you need
     $scope.opt.selectedIdx = index ; //Set the current index here, You could do this inline as well in the html, but probably better off having logic in your controller
}

<强> Plnkr

Answer 4

只需选择课程blur中的所有其他元素，然后在将课程分配给当前点击的element之前从中删除课程。

$scope.pickTest = function(index, event) {
     $('.blur').removeClass('blur');
     $(event.target).addClass('blur');
};

如何处理我班级中的点击事件

4 个答案: