I'm new to Angular 1.0 and I'm coming 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"));
});
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.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>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.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 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.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>