<!DOCTYPE html> <html> <head> <script src="angular.js"></script> </head> <body ng-app> <label>Show the square: <input type="checkbox" ng-model="mustShow" /></label><br /> <div ng-if="mustShow" style="width: 50px; height: 50px; background-color: red;"></div> <div ng-if="!mustShow" style="width: 100px; background-color: lightgray; text-align: center;">Not shown</div> </div> </body> </html>



The ng-if directive allows us to conditionally insert or remove an element in the DOM.

In the example, we decide if a couple of div elements have to be included or not in the DOM depending on the value of the mustShow model variable. In the second div you can also see that we can use the exclamation mark to negate the expression.

The ng-if directive creates a new scope.