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

this in angularjs

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 )
$event.target
// use injQuery (as $(this))
$($event.target);

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="https://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>
     <br/>
     <br/>
     <!-- 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>
     <br/>
     <br/>
      <!-- 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>
    </div>
  </div>
</body>

**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");
  }
});

SEE LIVE DEMO

Please give your comments and suggestion Thanks.

Maddyzone

Rituraj ratan

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