用angularJS触发点击最接近的div

关注

发信

关注(28)粉丝(399)

用angularJS触发点击最接近的div

本文介绍了用angularJS触发点击最接近的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好，我有以下代码：

我的想法是，当我点击一个输入时，它强制点击

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.

解决方案

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>

这篇关于用angularJS触发点击最接近的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-14 23:40