Angular way to capture id if child is clicked

I am new to Angular 1.0 and I am coming from jQuery backgroud.

Let's say I have the following 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>

      

Now I want to have a function that will return the id of the child. What could be the Angular way to best implement the following jQuery code:

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

      

+3


source to share


7 replies


You can create a directive that you attach to the parent element, and that directive can bind to the onClick event for all children.

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>
      

Run codeHide result




You can use ngRepeat to render the children instead of listing them separately, and for repeated children you can add ngClick.

You can add ngClick to each child separately.

+3


source


The easiest way is to create an array and loop it through the DOM with ng-repeat

, then you can pass the object as a parameter to the click function and get the id

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

      

array of samples

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

      

if you don't want to use ng repeat then i suggest passing $event.target

as a parameter of the click event

<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>

      



Function

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

      

Demonstration

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>
      

Run codeHide result


+4


source


In angular, when you click on an element, you get an event object.

This object has a toElement property that gives you the element that received the event. Then you can just use toElement.id to display the 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>
      

Run codeHide result


+3


source


In your angularJs controller define a function that receives the event and provide directive ng-click

for sections like

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

      

Controller:

$scope.ShowId = function(event)
{
   alert(event.target.id);
};

      

+2


source


Create a custome directive

for the parent div

. This directive will give you access to the item DOM

. It is recommended to use angular

the element access method DOM

.

0


source


You can use a directive ng-click

to pass the event. Like this

<div id="filters" ng-click="myFunction($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>

      

0


source


Here's a minimal approach where the id is passed directly from the HTML template. This way you can keep the controller as clean as possible and you don't need to create any additional directives.

<div ng-app="app">
  <div ng-controller="MainCtrl as $ctrl">
    <div id="filters">
      <div id="filter1" ng-click="$ctrl.showId($event.target.id)">Filter 1</div>
      <div id="filter2" ng-click="$ctrl.showId($event.target.id)">Filter 2</div>
      <div id="filter3" ng-click="$ctrl.showId($event.target.id)">Filter 3</div>
      <div id="filter4" ng-click="$ctrl.showId($event.target.id)">Filter 4</div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
  angular
    .module('app', [])
    .controller('MainCtrl', function() {
      this.showId = function(id) {
        console.log(id);
      }
    });
</script>
      

Run codeHide result


0


source







All Articles