Accessing clicked element in angularjs Accessing clicked element in angularjs angularjs angularjs

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/