问如果单击子键，则捕获Id的角度方式
EN

Stack Overflow用户

提问于 2017-03-28 22:28:21

回答 7查看 700关注 0票数 3

我刚开始学习角1.0，我来自jQuery背景。

假设我有以下HTML：

<div id="filters">
    <div id="filter1">Filter 1</div>
    <div id="filter2">Filter 2</div>
    <div id="filter3">Filter 3</div>
    <div id="filter4">Filter 4</div>
</div>

现在，我希望有一个函数，它将返回被单击的子元素的id。最佳实现以下jQuery代码的最佳方法是什么：

$('#filters div').on('click', function() {
  alert($(this).attr("id"));
});

javascript

jquery

html

angularjs

回答 7

Stack Overflow用户

回答已采纳

发布于 2017-03-28 22:35:06

您可以创建一个附加到父级的指令，该指令可以绑定到所有子级的onClick事件。

function getChildrenid() {
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {
      var children = element[0].querySelectorAll('div'); //get all child div's
      angular.forEach(children, function(child) { //loop over all the child
        var ngElement = angular.element(child); //create an angular element of the child
        ngElement.on('click', function() { //bind to the click event
          console.log(ngElement.attr('id'));
        });
      });
    }
  };
}

function MainController() {
  //
}

angular.module('app', []);
angular.module('app')
  .controller('MainController', MainController)
  .directive('getChildrenid', getChildrenid);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController as ctrl">
    <div id="filters" get-childrenid>
        <div id="filter1">Filter 1</div>
        <div id="filter2">Filter 2</div>
        <div id="filter3">Filter 3</div>
        <div id="filter4">Filter 4</div>
    </div>
  </div>
</div>

您可以使用一个ngRepeat来呈现子元素，而不是单独列出它们，而可以在重复的子元素上添加一个ngClick。

您可以分别向每个子元素添加一个ngClick。

票数 3

Stack Overflow用户

发布于 2017-03-28 22:38:30

最简单的方法是创建一个数组并使用ng-repeat通过DOM循环它，然后将对象作为参数传递给函数并获得id。

<div id="filters">
    <div ng-click="check(item)" ng-repeat="item in arr" id="{{item.id}}">{{item.name}}</div> 
</div>

样本阵列

[{"name":"Filter 1","id":"filter1"},{"name":"Filter 2","id":"filter2"},{"name":"Filter 3","id":"filter3"},{"name":"Filter 4","id":"filter4"}]

如果不想使用ng重复，那么我建议将$event.target作为参数传递给click事件

<div id="filters">
    <div id="filter1" ng-click="getID($event.target)">Filter 1</div>
    <div id="filter2" ng-click="getID($event.target)">Filter 2</div>
    <div id="filter3" ng-click="getID($event.target)">Filter 3</div>
    <div id="filter4" ng-click="getID($event.target)">Filter 4</div>
</div>

功能

$scope.getID = function(item){
   console.log(item.id)
};

演示

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = [{"name":"Filter 1","id":"filter1"},{"name":"Filter 2","id":"filter2"},{"name":"Filter 3","id":"filter3"},{"name":"Filter 4","id":"filter4"}]


$scope.check = function(item){ 
    console.log(item.id)
}

$scope.getID = function(item)
{
    console.log(item.id)
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

<p> using ng repeat </p>
 <div id="filters">
    <div ng-click="check(item)" ng-repeat="item in arr" id="{{item.id}}">{{item.name}}</div> 
</div>
<br>

<p> using $event </p>
<div id="filters">
    <div id="filter1" ng-click="getID($event.target)">Filter 1</div>
    <div id="filter2" ng-click="getID($event.target)">Filter 2</div>
    <div id="filter3" ng-click="getID($event.target)">Filter 3</div>
    <div id="filter4" ng-click="getID($event.target)">Filter 4</div>
</div>

</div>

票数 4

Stack Overflow用户

发布于 2017-03-28 22:41:16

在角度上，当您单击一个元素时，您将得到一个事件对象。

此对象具有一个toElement属性，它为您提供接收该事件的元素。然后您可以简单地使用toElement.id来显示id：

function MyController() {
  this.getId = function(event) {
    console.log(event.toElement.id);
  }
}

angular.module('app', []);
angular.module('app')
    .controller('MyController', MyController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as ctrl">
    <div id="filters" ng-click="ctrl.getId($event)">
        <div id="filter1">Filter 1</div>
        <div id="filter2">Filter 2</div>
        <div id="filter3">Filter 3</div>
        <div id="filter4">Filter 4</div>
    </div>
  </div>
</div>