8 Example(s) of Ng-Non-Bindable


Description :

Ng-non-Bindable directive when you do not want to compile or bind application data to the html element.It display {{1+2}} as it.


Ng-Non-Bindable Example - 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div>Normal: {{1 + 2}}</div>
        <div ng-non-bindable>Ignored: {{1 + 2}}</div>
    </div>
</body>
</html>

Output

Description :

In this we can display sum on click of add button because it can call Add() function which add values of two textbox.


Ng-Non-Bindable Example - 2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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="controllerName">
        Value 1 <input type="number" ng-model="val1" />
        Value 2 <input type="number" ng-model="val2" />
        <input type="button" value="Add" ng-click="Add()" />
        <div>Normal: {{sum}}</div>
        <div ng-non-bindable>Non-Bindable: {{sum}}</div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.Add = function () {
            $scope.sum = $scope.val1 + $scope.val2;
        }
    }]);
</script>
</body>
</html>

Output

Description :

In this example we can display value of Arrs object using ng-repeat directive but in other case we display {{Arr.val}} as it because ng-non-bindable directive will not compile the data.


Ng-Non-Bindable Example - 3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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="controllerName">
        <span ng-repeat="Arr in Arrs">
            Normal: {{Arr.val}}<br />
            <i ng-non-bindable>Non-Bindable: {{Arr.val}}</i><br />
        </span>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.Arrs = [{ val: 1+2 }, { val: 5*3 }, { val: 20/5 }, { val: 10-4 }];
    }]);
</script>
</body>
</html>

Output

Description :

In this textbox value is bind to myName variable.In first case textbox value is display but in second case it will display {{myName}} because ng-non-bindable does not bind application data to html element.


Ng-Non-Bindable Example - 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Name: <input type="text" ng-model="myName">
        <p>My name is {{ myName }}</p>
        <p ng-non-bindable>My name is {{ myName }}</p>
    </div>
</body>
</html>

Output

Description :

First expression display the result "10" but second and third expression display as it because ng-non-bindable directive does not compile or bind data to the html element.


Ng-Non-Bindable Example - 5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <p> {{'Expression: 5+5 = ' + (5+5)}}</p>
        <p ng-non-bindable>{{ 'Non-Bindable 2+2 = ' + (2+2)}} </p>
        <p class="ng-non-bindable"> {{ 'Non-Bindable with class 2+2 = ' + (2+2)}} </p>
    </div>
</body>
</html>

Output

Description :

In first div Your Name is: {{Name}} display as it because ng-non-bindable does not compile the data.In second div it compile the {{Name}} which is intializewith FirstName and SecondName.


Ng-Non-Bindable Example - 6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div ng-init="Name='FirstName, LastName'" ng-non-bindable>
            Your Name is: {{Name}}
        </div>
        <div ng-init="Name='FirstName, LastName'">
            Your Name is: {{Name}}
        </div>
    </div>
</body>
</html>

Output

Description :

Ng-Non-Bindable-7


Ng-Non-Bindable Example - 7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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="myController">
        <br />
        FIRST REPEAT<div ng-repeat="lang in languages"><span ng-bind="lang"></span></div><br /><br />
        SECOND REPEAT<div ng-repeat="lang in languages"><span ng-non-bindable="lang"></span></div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.languages = ["JavaScript", "Jquery", "AngularJS", "Php", "DotNet", "Java"];
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Non-Bindable-8


Ng-Non-Bindable Example - 8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <div class="row well">
            <div class="col-md-12 text-center">
                <h4>Use of ng-non-bindable</h4>
                <div style="height:50px;background-color:moccasin;padding:10px">
                    Example 1 :  When we evaluate <span style="background-color:red;color:white">{{5+5}}</span> expression the answer is  =  {{5+5}} &nbsp;&nbsp;<span class="glyphicon glyphicon-remove"></span>
                </div>
                <div style="height:50px;background-color:tan;padding:10px">
                    Example 2 :  When we evaluate <span style="background-color:green;color:white" ng-non-bindable>{{5+5}}</span> expression the answer is =  {{5+5}} &nbsp;&nbsp; <span class="glyphicon glyphicon-ok"></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output