AngularJs #09 How To Use ng-show And ng-hide Directives in Angular JS ( Tutorial )

Image Source

What Will I Learn?

I will learn how to use the ng-show and ng-hide directive to hide and mask values.

How to add a new ng-model and apply the value of this model to the other directives
How to hide elements by the ng-hide and ng-show directive ( value of propriety of ng-model)
How to mask values by them ( ng-hide and ng-show )

Requirements

Basic Knowledge of HTML and CSS language .
Basic Knowledge of JavaScript language .
Has an editor text support HTML and JavaScript .
Must has the angular files from the official site .

Difficulty

Basic

Tutorial Contents

In this tutorial we will discuss how to use the ng-hide and ng-show directive , why we use them ?
We use the ng-hide and ng-show directive to control the visibility of the HTML elements . I will explain it with an example .
I will create a table with 4 columns , by this directive when I check one of these columns will disappear and when I check again it will appear , let's see how to do it .

I have created an array named " employees " in a controller function this array contains 4 employees 4 objects each one has 4 elements " the name , gender , city and salary " , and I attached this array with the $scope to be the model in the view page .

In the HTML page I used the table to display the data of employees with a thead section to display the headers of our table and in the tbody section I used the ng-repeat directive to repeat each employee in employees and this is the result

This is how the employees data display at the moment just about this table we want t check box , so let's add it

I added an input with a type is check box and I have added an ng-model directive attribute with the value is hideSalary to link it with the columns and the $scope object also I added the label is " Hide Salary " also and this is the result

As you see I have the check box now but it's not clickable when you click nothing will change in the table to do it dynamically let's add the model here ..

I used the ng-hide directive here with the same propriety of the ng-model to be dynamically for the thead and the tbody data . Initially hideSalary not available because with the controller the $scope object we have only the employees but our variable hideSalary it's not available with the $scope object so it will be undefined so the value is false , what I did is the ng-hide directive it has the value false or true and now the value of the hideSalary is false so the ng-hide = false it means the column will display so when the page load we will be able to see the salary column and this is the result

Now when I check the hide salary what is going to happen the value of the ng-model hideSalary variable will be changed by this element and that will be updated in the model and the th , td elements that used this variable it will be true and when the ng-hide take the value true this is what will happen

As we check the checkbox the salary column is hidden and when we uncheck it will display again

Now we will use the ng-show directive we will change it just by type the " ! " sign which the opposite of our value so if the hideSalary variable has the value false it will be true because the ng-show = true it means the column will display but the opposite it's false it will be hidden

As you see here I take the opposite value if I have ng-hide directive and I use the opposite so the value it will be true and the column will be hidden by default but the ng-show it must be true to be displayed and this is the result

The column by default is true now I want to check it , it will be hidden because the value of the model will change and also the th and td elements will change also

After that let's mask and unmask the Salary column values it means when I check for hide salary the values will be masked then if I uncheck it , it will display

I have added another th and another td elements to divide one take the ng-hide directive and the other take the ng-show directive but the two elements has the same ng-model hideSalary propriety , if it's true they will be take the value and if it's false also they will be take it but there is a different because if it's true it will be show why ? because the ng-hide when it takes the true value it will be hidden so the salary will be hidden we will mask it but the opposite it will show and this is the result

Now the values are in the default presentation when we click on hide salary when we check it this is the result

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @aymenz I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x