Trigger click on closest div with angularJS

Question

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 1

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>