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"));
});
source to share
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>
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.
source to share
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>
source to share
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>
source to share
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);
};
source to share
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>
source to share