<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<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/wp-content/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://tech-blog.maddyzone.com/angularjs/this-in-angularjs" target="_blank">View Post on Maddyzone </a>
</div>
</div>
</body>
</html>
//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");
}
});
/* Styles go here */