Accessing clicked element in angularjs
While AngularJS allows you to get a hand on a click event (and thus a target of it) with the following syntax (note the $event
argument to the setMaster
function; documentation here: http://docs.angularjs.org/api/ng.directive:ngClick):
function AdminController($scope) { $scope.setMaster = function(obj, $event){ console.log($event.target); }}
this is not very angular-way of solving this problem. With AngularJS the focus is on the model manipulation. One would mutate a model and let AngularJS figure out rendering.
The AngularJS-way of solving this problem (without using jQuery and without the need to pass the $event
argument) would be:
<div ng-controller="AdminController"> <ul class="list-holder"> <li ng-repeat="section in sections" ng-class="{active : isSelected(section)}"> <a ng-click="setMaster(section)">{{section.name}}</a> </li> </ul> <hr> {{selected | json}}</div>
where methods in the controller would look like this:
$scope.setMaster = function(section) { $scope.selected = section;}$scope.isSelected = function(section) { return $scope.selected === section;}
Here is the complete jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/