Trigger нажмите на ближайший DIV с angularJS

Question

Привет У меня есть последующий код:

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>

Моя идея, когда я нажимаю на входе, он заставляет щелчок с triggerHandler() к зеленый div на правой стороне и печатает его номер. Он должен просто заставить щелчок зеленого div, который находится на правой стороне щелкнутого входа, а не все из них. Сегодня я написал аналогичный вопрос для JQuery: Force click with trigger() on closest div

Там он отлично работает с более возможными решениями. Как я могу сделать тот же эффект с angularjs?

Спасибо.

Answer 1

Перевал $event на главную ng-click function, а затем получить .parent(), а затем 2-го ребенка. Затем триггер.

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>