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.
<!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>
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"
<!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>
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.
<!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>
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.
<!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>
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".
<!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>
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.
<!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>
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.
<!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>
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.
<!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>