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.
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 is true then color picker will show. Here is the code for ng-if ng-if="isColorPicker"
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.
In this example, We will have a textbox with type
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-click like ng-click="vm.isHide=!vm.isHide".
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.
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.