I'm new to Angular 1.0 and I'm ing from jQuery backgroud.

Let's say I have 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 which will return id of child element being clicked. What could be the Angular way to best implement the following jQuery code :

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

I'm new to Angular 1.0 and I'm ing from jQuery backgroud.

Let's say I have 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 which will return id of child element being clicked. What could be the Angular way to best implement the following jQuery code :

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

• javascript
• jquery
• html
• angularjs

7 Answers 7

Easiest way to do is create an array and loop it through the DOM using ng-repeat then you can pass the object as parameter to 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>

sample array

[{"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 the ng repeat then i suggest pass the $event.target as the parameter to 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>

The function

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

Demo

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

You could create a directive which you attach to the parent and this directive could bind to the onClick event for all the 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./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>

You could use an ngRepeat to render the children instead of listing them all separately and on the repeated children you could add an ngClick.

You could add an ngClick to each child element separately.

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. You can then simply 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./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>

In you angularJs controller define a function that gets an event and specify ng-click directive on the divs 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);
};

Create a custome directive on your parent div. This directive will give you the access to the DOM element. This is remended angular way for accessing DOM elements.

You can use ng-click directive to pass 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>

Here's a minimal approach in which the ID is directly passed from the HTML template. This way, you can keep your 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./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>