Как обработать событие click в моем классе

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); 
 
    }; 
 
    
 
    \t 
 
    });

.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

Использование нг-класса, например:

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

Обратите внимание, что вам не нужно устанавливать blurActive к истинным внутри вашей функции, потому что ng-repeat создает новую область для каждого «повторяющемся», так что вы может активировать его внутри того же ng-click, после того как вы вызовете свою функцию, таким образом, логика вашей функции не будет смешана с дизайном.

Answer 3

Просто выберите все остальные элементы с классом blur и удалите класс из них, прежде чем назначать класс текущему клику element.

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

Answer 4

Выполнение манипуляции 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