LearnKode

4 Example(s) of angular element


Description :

angular.element is very similar to jquery selectors and In this example we append html after a specific div See the code snippet:


angular element Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="elementController">
        <div id="testDiv">{{name}}</div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('elementController', ['$scope', '$document', function ($scope, $document) {
        $scope.name = "LearnKode";
        var element = angular.element($document[0].querySelector('#testDiv'));
        element.append("<p>Append</p>");
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of angular element, we have a textbox and value of this text box is set with the help of angular.element on clicking the button. See the code snippet:


angular element Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="elementController">
        <input type="text" id="myText" ng-model="myVal" />
        <button ng-click="getVal()">Get Val</button><br />
        {{value}}
    </div>
 <script>
    var app = angular.module("app", []);
    app.controller('elementController', ['$scope', '$document', function ($scope, $document) {
        $scope.myVal = "LearnKode";
        $scope.getVal = function () {
            $scope.value = angular.element($document[0].querySelector('#myText')).val();
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of angular element, CSS will be apply on mouse enter and removed on mouse leave. See the code snippet:


angular element Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="elementController">
        <div ng-mouseenter="applyCss()" id="myDiv" ng-mouseleave="removeCss()">
            {{name}}
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('elementController', ['$scope', '$document', function ($scope, $document) {
     $scope.name = "LearnKode";
     $scope.applyCss = function () {
        angular.element($document[0].querySelector('#myDiv')).css({ 'color': 'white', 'background-color': 'red' });
     };
     $scope.removeCss = function () {
        angular.element($document[0].querySelector('#myDiv')).css({ 'color': 'black', 'background-color': 'white' });
     };
    }]);
  
</script>

</body>
</html>
Try it » Download Example »

Output

Description :

In this example, angular.element append and prepend "LearnKode.Com" and "Welcome". The result will be "Welcome to LearnKode.Com" See the code snippet:


angular element Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="elementController">
        <div id="appentPrepend">
            to
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('elementController', ['$scope', '$document', function ($scope, $document) {
        var element= angular.element($document[0].querySelector("#appentPrepend"));
        element.prepend('<b>Welcome</b>');
        element.append('<i>LearnKode.Com</i>');
    }]);
   
</script>

</body>
</html>
Try it » Download Example »

Output