Post
Ask Question

Get Attributes of Element in AngularJS Just Like jQuery

Introduction

jQuery provides the very good feature that when you have created any kind of click/keyup/keydown and so on event then you can find all the attributes of that element in that function using the "this" keyword. But jQuery doesn't provide such kind of functionality (as far as I know, it might be possible that I am wrong). So, I was trying to access the attributes of an element in the angular code. Then I came to understand that we can access them, but with some small functionality. So, here I am explaining that trick/functionality to get the attributes.

Step 1

First of all I have created a HTML page that will help us to understand this article in a very simple way.

  1. <body ng-app>  
  2.     <h3>  
  3.         Page to show how to get attributes of html element in Angular code just like jquery have.  
  4.     </h3>  
  5.     <hr />  
  6.   <div ng-controller="AngularController">  
  7.     <input type="text" id="firstText" name="firstName" ng-keyup="showAttributes($event)" />  
  8.   </div>  
  9. </body> 

Here I bound the controller to a div, this controller is not yet created but I provided this name in the HTML and I'll provide it in the Angular code as well.

In this div I took a simple HTML element that is of input type and added some attributes to this element, like "name", "id" and so on.

On the keyup of this element I called the function named "showAttributes", in this function I am sending the $event as parameter. This parameter will help us to access the attributes.

Step 2

After this I created a JavaScript file where we will write the AngularJs code.

On this JavaScript file I had code something like this:

  1. var AngularController = function ($scope) {  
  2.   
  3.     $scope.showAttributes = function (element) {  
  4.         var prefix = 'Mr.';  
  5.         if (!(element.currentTarget.value.match('^Mr.'))) {  
  6.             element.currentTarget.value = prefix + element.currentTarget.value;  
  7.         }  
  8.     };  
  9. }; 

Here I have created a controller with the name "AngularController".

In this controller I created a function named "showAttributes". That is the function to be called on the keyup. The parameter of this function will help in accessing the attributes.

In this function I have created a variable to which some value is assigned.

Now I will check whether our TextBox has this predefined value in it. If not then this predefined value will come in front of the text and will work as a prefix.

The attributes of the element can be found only under the currentTarget.

Step 3

Now call this JavaScript file on your HTML page in the head section as in the following:

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>  
  5.     <script src="AngularController.js"></script>  
  6.     <title></title>  
  7. </head>  
  8.   <body ng-app>  
  9.       <h3>  
  10.           Page to show how to get attributes of html element in Angular code just like jquery have.  
  11.       </h3>  
  12.       <hr />  
  13.     <div ng-controller="AngularController">  
  14.       <input type="text" id="firstText" name="firstName" ng-keyup="showAttributes($event)" />  
  15.     </div>  
  16.   </body>  
  17. </html> 

Output

Now we can run the code and can check whether our code is working properly or not.

On running the code, first of all a simple page will be seen.

Attributes of Elements inAngularJS

But as you click on the TextBox and check the value in the console, you will find that the method is called perfectly and as you move forward you will see that all the attributes are available in the current target.

Attributes of Elements inAngularJS

On the TextBox, Mr. will be append automatically.

Attributes of Elements in AngularJS


Similar Articles