MrBuggy MrBuggy - 4 months ago 48
AngularJS Question

Trigger click on closest div with angularJS

Hi I've got follow code:



angular.module("myApp", []).controller("myController", function($scope) {
$scope.clickedInput = function() {
setTimeout(function() {
angular.element('.addon').triggerHandler('click');
}, 100);
}

$scope.clickedAddon = function(number) {
console.log(number);
}
});

.wrapper {
display: flex;
flex-direction: column;
}
.inputWithAddon {
display: flex;
margin-bottom: 10px;
}
input {
height: 20px;
}
.addon {
width: 26px;
height: 26px;
background-color: green;
}

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

<div class="wrapper" ng-app="myApp" ng-controller="myController">
<div class="inputWithAddon">
<input placeholder="1" class="myInput" ng-click="clickedInput()">
<div class="addon" ng-click="clickedAddon(1)">1</div>
</div>
<div class="inputWithAddon">
<input placeholder="2" class="myInput" ng-click="clickedInput()">
<div class="addon" ng-click="clickedAddon(2)">2</div>
</div>
<div class="inputWithAddon">
<input placeholder="3" class="myInput" ng-click="clickedInput()">
<div class="addon" ng-click="clickedAddon(3)">3</div>
</div>
</div>





My idea is, when I click in an input, it forces a click with
triggerHandler()
to the green div on the right side and prints his number. It should just force the click of the green div, which is on the right side of the clicked input, not all of them. I wrote today a similar question for JQuery: Force click with trigger() on closest div

There it works fine with more possible solutions. How can I do the same effect with angularjs?

Thanks.

Answer

Pass $event to the main ng-click function and then get .parent() and then the 2nd child. Then trigger.

var a = angular
             .element($event.target)
             .parent().children()
        angular
             .element(a[1]).triggerHandler('click');

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.clickedInput = function($event) {
    setTimeout(function() {
        var a = angular
             .element($event.target)
             .parent().children()
        angular
             .element(a[1]).triggerHandler('click');
        
    }, 100);
  }

  $scope.clickedAddon = function(number) {
    console.log(number);
  }
});
.wrapper {
  display: flex;
  flex-direction: column;
}
.inputWithAddon {
  display: flex;
  margin-bottom: 10px;
}
input {
  height: 20px;
}
.addon {
  width: 26px;
  height: 26px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="myApp" ng-controller="myController">
  <div class="inputWithAddon">
    <input placeholder="1" class="myInput" ng-click="clickedInput($event)">
    <div class="addon" ng-click="clickedAddon(1)">1</div>
  </div>
  <div class="inputWithAddon">
    <input placeholder="2" class="myInput" ng-click="clickedInput($event)">
    <div class="addon" ng-click="clickedAddon(2)">2</div>
  </div>
  <div class="inputWithAddon">
    <input placeholder="3" class="myInput" ng-click="clickedInput($event)">
    <div class="addon" ng-click="clickedAddon(3)">3</div>
  </div>
</div>