Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Get HTML element using class name or Id in AngularJS

    @shubham.mamgain
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 11.2k
    Comment on it

    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:

    var elem = angular.element(document.querySelector(".ClassName"));

    Using Id:

    var elem = angular.element(document.querySelector("#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>

     

    Happy Coding....

    .net C# AngularJS
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: