about 9 years ago
Hi All,
In this blog we will see how easy is to get HTML element in AngularJS. We many a times stuck in situation where we need to get HTML element that are not bind to AngularJS Model. Here is quick and easiest way of doing that.
Using Class Name:
Using Id:
Using this can help in getting the HTML element in AngularJS.
Sample Code:
<html><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script></head><body><form><div ng-app="myApp" ng-controller="myCtrl"><input type="text" id="txtSample1" value="Hello" class="clsSample" /><input type="text" id="txtSample2" value="Hello" /><input type="button" id="btnShow" value="Show" ng-click="showval();" /></div><script>var app = angular.module("myApp", []);app.controller("myCtrl", function ($scope) {$scope.showval = function () {alert(angular.element(document.querySelector(".clsSample")).val());alert(angular.element(document.querySelector("#txtSample2")).val());};});</script></form></body></html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<form>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" id="txtSample1" value="Hello" class="clsSample" />
<input type="text" id="txtSample2" value="Hello" />
<input type="button" id="btnShow" value="Show" ng-click="showval();" />
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.showval = function () {
alert(angular.element(document.querySelector(".clsSample")).val());
alert(angular.element(document.querySelector("#txtSample2")).val());
};
});
</script>
</form>
</body>
</html>
Happy Coding....
0 Comment(s)