The ng-show and ng-hide directives

While the app is good as it is, maybe it’s a good idea to have a button called Add Contact and display the Add Contact form only when that button is clicked.

Let us make use of angularjs‘s ng-show and ng-hide directives to control the visibility of our Add Contact form.

The way they work is very straightforward. If the attribute ng-show='true', then the div is visible and vice versa. A point to note is that ng-show and ng-hide merely control the visibility of the DOM element.

Let’s add our button called Add Contact and set up the ng-show and ng-hide directives such that when you click on Add Contact, the form shows up and at the same time this button disappears. And when the Save button is clicked, the form is hidden and the Add Contact button shows up again.

Let’s modify our index.html as follows:

<center><button ng-click="ShowForm()" ng-hide="formVisibility "> Add Contact</button></center>
   <div ng-show="formVisibility " class="wrapper">
          <h2>Add a Contact</h2>
   Name: <input type="text" ng-model="newPerson.name"></input>
   Phone: <input type="text" ng-model="newPerson.phone"></input>
   City: <input type="text" ng-model="newPerson.city"></input>
         <button ng-click="Save()">Save</button>
   </div>

We set the button to ng-hide='formVisibility' because when the value of formVisibility becomes true, it will hide the button. Similarly, ng-show= formVisibility will make the Add Contact form display when the value of formVisibility is true.

Now, let’s add the piece of JavaScript to set the formVisibility values. Add the following code to your scripts.js file as follows:

$scope.ShowForm=function(){
$scope.formVisibility=true;
}

Tip

Make sure this new function is written within the main PeopleController function.

We will also add one line in our existing $scope.Save function to set the value of formVisibility to false.

Please update the $scope.Save() function as highlighted in the following code:

$scope.Save = function() {

    $scope.people.push({
        name: $scope.newPerson.name,
        phone: $scope.newPerson.phone,
        city: $scope.newPerson.city
    });
    $scope.formVisibility = false;

}

Reload your index.html and see the buttons in action.

Oh and just because we don’t like the way those default buttons look, lets add a little bit of style to it.

Add the following CSS classes to your styles.css file:

button
{
   background:#080;
   color:#fff;
   padding:5px 15px;
   border-radius: 5px;
   border: thin solid #060;
"margin: 5px auto;"
}
button:hover{
   background: #0A0;
}

What we are simply doing here is setting a dark green color background for the button, giving the text a white color, and giving it some padding five pixels from the top- and bottom-side and 15 pixels from the left-hand side and right-hand side and adding some border radius.

The button:hover is a light green background color just to show the highlight when the user hovers the cursor over the button.

 

Reload your index.html page and we have our very first working and reasonably good-looking Address Book Application.

Wrapping UP

we went about building our Address Book App and in doing so learned about the various angularjs directives such as ng-app and ng-repeat. We saw how two-way data bindings and expressions work and the importance of scope. We also saw how we can hide and show certain elements using the ng-show and ng-hide directives. Last but not least, we used some simple and easy CSS3 features to style our app.