Trigger-Klick auf die am nächsten Div mit AngularJS

Question

Hallo Ich habe Follow Code bekam:

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>

Meine Idee ist, wenn ich in einem Eingang klicken, es zwingt einen Klick mit triggerHandler() auf die grün div auf der rechten Seite und druckt seine Nummer. Es sollte nur das Klicken des grünen Div, das auf der rechten Seite der angeklickten Eingabe ist, nicht alle von ihnen erzwingen. Ich schrieb heute eine ähnliche Frage für JQuery: Force click with trigger() on closest div

Dort funktioniert es gut mit mehr möglichen Lösungen. Wie kann ich mit angularjs den gleichen Effekt erzielen?

Danke.

Answer 1

Übergeben Sie $event an die Haupt ng-click function und dann .parent() und dann das zweite Kind. Dann triggern.

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>