Get element by class name in AngularJs
Get element by class name in AngularJs : It is very common to deal with class and id selector in AngularJs. You can use AngularJs jQuery lite to get all elements by class name. Here in this tutorial we are going to explain how to use jQlite to get element by class name. You can also use our online tool to run and edit the code.
How to Get element by class name in AngularJs?
You can use jQlite angular.element() to get the element by class name. Let us go step by step.
JavaScript Part –
JavaScript Part Contains the following script –
Get element by class name in AngularJs : JavaScript
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.getClassElm = function() {
var element = angular.element(document.querySelector(".myPara"));
element.css('color', 'blue');
};
});
</script>
|
Html Part-
Html Part Contains the following html –
Get element by class name in AngularJs Example:
<div ng-app="myApp"> <div ng-controller="myController"> <h3>AngularJs Is Cool!</h3> <p class="myPara"> This is test paragraph.... </p> <input type="button" value="Change Paragraph Color" ng-click="getClassElm()"> </div> |
Complete Example-
Now let us combine both javascript and html parts. Here is the complete example –
Get element by class name in AngularJs:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.getClassElm = function() {
var element = angular.element(document.querySelector(".myPara"));
element.css('color', 'blue');
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<h3>AngularJs Is Cool!</h3>
<p class="myPara">
This is test paragraph....
</p>
<input type="button" value="Change Paragraph Color " ng-click="getClassElm()">
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
