I'm Rituraj, a Developer @Nagarro. founder of Maddyzone. JavaScript, Angular, Node.

Buy Me a Coffee at ko-fi.com

this in angularjs

This is Angular JS

Most of the time we use this in JavaScript or $(this) in jQuery .

Now How to use this in AngularJS ?

In Angular by $event  we can get this by event object, from which we can get the event target and use it with JavaScript or jQuery.

//use in core JavaScript ( as this )
// use injQuery (as $(this))

Lets Create a demo

IN HTML– In this we set our layout and call function on click(for anchor tag) and on keyup(for input)

by ng-click  at the time of click getText method call

by ng-keyup at the time of keyup getVal method call

in both of the method we pass $event and use in our controller see JS file code for more.

<body ng-app="maddyzone">
  <!--Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on body tag ) -->
  <div class="container">
    <div class="jumbotron" ng-controller="ThisCtrl">
      <img src="http://tech-blog.maddyzone.com/uploads/2013/10/maddyzone-logo-300x72.png" />
      <br />
      <h1>Get this in angular js</h1>
      <br />
      <label class="label label-primary">Click on below button to get its text</label>
     <!-- pass $event then get in controllers as a event then use it any property -->
      <a class="btn btn-success" ng-click="getText($event)">Hello Plunker!</a>
      <br />
      <br />
     <label class="label label-primary">Type on below input to get its value</label>
      <!-- pass $event then get in controllers as a event then use it any property -->
      <input type="text" value="test value" ng-keyup="getVal($event)" />
        <br />
        <a href="http://maddyzone.com/javascript/this-in-angularjs" target="_blank">View Post on Maddyzone </a>

IN JS in this we define our methods and use event.target as this

//create a module maddyzone
var maddyzone = angular.module('maddyzone', []);

// create the controller and inject Angular's $scope
maddyzone.controller('ThisCtrl', function($scope) {
  // make a method to get input value by using $event as this (event.target)
  $scope.getVal = function(event) {
    alert($(event.target).val() + "----Get By jQuery Method .val()");
    alert(event.target.value + "----Get By javaScript Property .value");

  // make a method to get text by using $event as this (event.target)
  $scope.getText = function(event) {
    alert($(event.target).text() + "----Get By jQuery Method .text()");
    alert(event.target.innerHTML + "----Get By javaScript Property .InnerHTML");



Please give your comments and suggestion Thanks.

Rituraj Ratan

I'm Rituraj, a Developer @Nagarro. Founder of Maddyzone .