Ng-If-2

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>

Output