8 Example(s) of Ng-If


Description :

In this example last name textbox will be created if ng-if expression evaluates true i.e first name textbox neither be null nor empty. In our example, we have two textboxes one with ng-model="firstName" and second with ng-model="lastName", but there is span outside lastname textbox with ng-if="firstName!=null && firstName!=''" so if there will be any value in first textbox only then the second textbox will be visible.


Ng-If 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>
    <div>
        First Name <input type="text" ng-model="firstName" />
        <span ng-if="firstName!=null && firstName!=''"> Last Name <input type="text" ng-model="lastName" /></span>
    </div>
</body>
</html>

Output

Description :

In this example we can show the color picker based on the value of isColorpicker variable with ng-model directive which will set the value of checkbox to isColorpicker variable.If isColorpicker is true then color picker will show. Here is the code for ng-if ng-if="isColorPicker"


Ng-If Example - 2
<!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>
    <div ng-init="color='#0080ff'">
        First Name <input type="text" ng-model="firstName" /><br /><br />
        Last Name <input type="text" ng-model="lastName" /><br /><br />
        Show Color Picker <input type="checkbox" ng-model="isColorPicker" /><br /><br />
        <span ng-if="isColorPicker"> Color Picker <input type="color" ng-model="color" />{{color}}</span>
    </div>
</body>
</html>

Output

Description :

In this example, we have div with ng-if="!vm.IsShow" and By default value of vm.IsShow is false, So on the basis of vm.IsShow value div element will show or hide. On button click, We are using ng-click like ng-click="vm.IsShow=!vm.IsShow" so that will change the value of vm.IsShow variable and make div visible or hidden.


Ng-If Example - 3
<!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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="initExample">
    <div ng-controller="ExampleController as vm">
        <div ng-if="!vm.IsShow">
            <input type="button" class="btn btn-primary" ng-click="vm.IsShow=!vm.IsShow" value="Login">
            <p>Please Login</p>
        </div>
        <div ng-if="vm.IsShow">
            <button class="btn btn-primary" ng-click="vm.IsShow=!vm.IsShow">Logout</button>
            <p>Welcome !</p>
        </div>
    </div>
<script>
    var app = angular.module("initExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        var vm = this;
    }]);
</script>
</body>
</html>

Output

Description :

In this example, We will have a textbox with type email and this textbox has required attribute and It will give error if the user will type incorrect format or empty.


Ng-If Example - 4
<!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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    .email {
        background: maroon;
        color: white;
        padding: 5px;
        border-radius: 5px;
        margin-top: 15px;
        position: relative;
    }
</style>
</head>
<body ng-app>
    <div class="container">
        <form name="userForm" novalidate>
            <div class="field">
                <label for="emailAddress">Enter your email address:</label>
                <input type="email" class="form-control" name="emailAddress" ng-model="data.email" required />

                <div class="email" ng-if="userForm.emailAddress.$error.required && userForm.emailAddress.$dirty">
                    Email is mendatory field.
                </div>
                <div class="email" ng-if="userForm.emailAddress.$error.email">
                    This email did not correct.
                </div>
            </div><br />
            <input type="submit" class="btn btn-primary" />
        </form>
    </div>

</body>
</html>

Output

Description :

In this example, By default value of isHide variable is true as vm.isHide = true, If we click on the text "Click Here" second div text will display or vice versa on the basis of value of isHide variable. Here is the code on div ng-if="vm.isHide" and ng-click like ng-click="vm.isHide=!vm.isHide".


Ng-If Example - 5
<!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>
<style type="text/css">
   .cursor{ 
      cursor:pointer;
    }
</style>
</head>
<body ng-app="initExample">
    <div ng-controller="ExampleController as vm">
        <div class="row">
            <div class="col-md-6" ng-init="isHide=true">
                <div ng-if="vm.isHide" class="cursor" ng-click="vm.isHide=!vm.isHide"><h3>Click here...</h3></div>
                <div ng-if="!vm.isHide" class="cursor" ng-click="vm.isHide=!vm.isHide"><h3>Hi.. This is an example of ng-if. </h3></div>
            </div>
        </div>
    </div>
<script>
    var app = angular.module("initExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        var vm = this;
        vm.isHide = true;
    }]);
</script>
</body>
</html>

Output

Description :

In this example there is an array named Arrs which contains four elements but show only two element because ng-if directive evaluates expression i.e Arr will not contain element One and Four.It will show element Two and Three.


Ng-If Example - 6
<!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="initExample">
    <div ng-controller="ExampleController as vm">
        <div ng-repeat="Arr in Arrs">
            <span ng-if="Arr!='One' && Arr!='Four'">{{Arr}}</span>
        </div>
    </div>
<script>
    var app = angular.module("initExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.Arrs = ["One", "Two","Three","Four"]
    }]);
</script>
</body>
</html>

Output

Description :

In this example we can show div element whose Id is "my-div" based on value of showDiv variable with ng-model directive which will set the value of checkbox to showDiv variable.If ng-if evaluates showDiv variable value is true then div will show otherwise it will hide.


Ng-If Example - 7
<!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>
    <div>
        <input type="checkbox" ng-model="showDiv" />
        <label for="showDiv">Toggle Div</label>
        <div ng-if="showDiv">
            Learn It <b>ng-if Example</b>
        </div>
    </div>
</body>
</html>

Output

Description :

List of options created using array of object Arrs.On the basis of selected value the div element will show where condition will match.


Ng-If Example - 8
<!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>
    <div ng-init="Arrs = [{ name: 'Car' }, { name: 'Fruit' }];Carcolors=[{color:'Red'},{color:'Green'}];Fruitcolors=[{color:'Red'},{color:'Yellow'}];Interiors=[{type:'Black Cloth'},{type:'Leather'}]">
        Choose Object:  <select ng-model="name" ng-options="Arr.name as Arr.name for Arr in Arrs"></select>
        <div ng-if="name=='Car'">
            Color: <select ng-options="Carcolor.color as Carcolor.color for Carcolor in Carcolors" ng-model="carColor"></select><br />
            Interior: <select ng-options="Interior.type as Interior.type for Interior in Interiors" ng-model="interiorType"></select><br />
            Model Number: <input type="text" /><br />
        </div>
        <div ng-if="name=='Fruit'">
            Color: <select ng-options="Fruitcolor.color as Fruitcolor.color for Fruitcolor in Fruitcolors" ng-model="fruitColor"></select><br />
            Description: <input type="text" />
        </div>
    </div>
</body>
</html>

Output