Accessing clicked element in angularjs – Angular.js Recipes – Medium

  • I’m also using Twitter Bootstrap and I’ve got jQuery loaded.Workflow: User clicks a link from a list, “master” section is updated and link user clicked on gains active class.Basic HTML Markup:ul class=”list-holder” lia lia lia this in ‘a’, function(event){ I can’t figure out how to integrate Angular and jQuery to get this done, because I’m using Angular to fetch the master list (in JSON form) from the server and update a list on the page.How do I integrate this?
  • I can’t seem to find the element I’ve clicked on once I’m inside the angular controller functionController:function adminController($scope) { $scope.setMaster = function(obj) { // How do I get clicked element’s parent li?
  • console.log(obj); } }Problem courtesy of: R. DownSolutionWhile 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: 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 ul class=”list-holder” li ng-repeat=”section in sections” ng-class=”{active : isSelected(section)}” a /li /ul hr {{selected | json}}/divwhere 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: courtesy of: pkozlowski.opensourceView additional discussion.

I’m relatively new to AngularJS and suspect I’m not grasping a concept. I’m also using Twitter Bootstrap and I’ve got jQuery loaded. Workflow: User clicks a link from a list, “master” section is…

@_adeeb: Accessing clicked element in angularjs #javascript #angular #angularjs

I’m relatively new to AngularJS and suspect I’m not grasping a concept. I’m also using Twitter Bootstrap and I’ve got jQuery loaded.

Workflow: User clicks a link from a list, “master” section is updated and link user clicked on gains active class.

Basic HTML Markup:

Doing this in jQuery:

But I can’t figure out how to integrate Angular and jQuery to get this done, because I’m using Angular to fetch the master list (in JSON form) from the server and update a list on the page.

How do I integrate this? I can’t seem to find the element I’ve clicked on once I’m inside the angular controller function

Problem courtesy of: R. Down

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.

argument) would be:

where methods in the controller would look like this:

Here is the complete jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

Solution courtesy of: pkozlowski.opensource

Accessing clicked element in angularjs – Angular.js Recipes – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.