How to show or hide a div in Angular Js

Question

I have implemented two div where i have used some drop down control in a div named as div1 .I want to hide div2 until the any value is selected in drop down.I want to know how to hide or show a div on ng-change or untill any value is selected div2 must not be shown. Code:-

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" ng-init="getFormData();">
    <div id="div1">
    <tr>
    <td nowrap>Company Name:
    </td>
    <td>
    <asp:TextBox ID="txtCompanyName" runat="server" CssClass="NormalTextBox" TabIndex="1" Width="160px" Height="10px" ng-model="custom.txtCompanyName" required=""></asp:TextBox>  
    </td>
    </tr>
    <tr>
    <td>Country:</td>
    <td>
    <select id="listHomeCountry1" style="width: 182px !important; height: 34px;">
    <option value="0">--- Select an option ---</option>
    <option data-ng-repeat="Cntry in listHomeCountry" ng-model="custom.listHomeCountry" ng-change="" value="{{Cntry._key}}">{{Cntry._value}}</option>
    </select>
    </tr> 


    <div id="div2">
     <table style="position: relative; left: 0px;">
    <tr align="left">
    <td nowrap style="width: 200px">
    <asp:Label ID="lblContactAddress1" runat="server" CssClass="NormalTextBox" Width="60%"></asp:Label></td>
    <td nowrap>
    <asp:TextBox ID="txtContactAddress1" TabIndex="3" Name="txtContactAddress1" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress1" required=""></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td>
    <asp:Label ID="lblContactAddress2" runat="server" CssClass="NormalTextBox"></asp:Label></td>
    <td>
    <asp:TextBox ID="txtContactAddress2" Name="txtContactAddress2" TabIndex="4" runat="server" CssClass="NormalTextBox" Columns="35" Width="160px" Height="10px" ng-model="custom.txtContactAddress2" required=""></asp:TextBox>
    </td>
    </tr>
    </div>
    </div>

Now i want untill and unless a value is selected by my dropdown div2 will be hidden.

Check docs.angularjs.org/api/ng/directive/ngShow

Fissio
– Fissio

2015-07-13 07:57:45 +00:00
Commented Jul 13, 2015 at 7:57 — Fissio
– Fissio, Commented Jul 13, 2015 at 7:57

SD. · Accepted Answer · 2015-07-13 08:04:12Z

2

First assign a variable to your Choice List. For example

<select id="listHomeCountry1" ng-model="homeCounrty">

Then simply use ng-show (doc)

<div id="div2" ng-show="homeCountry">

The above is also equivalent to:

<div id="div2" ng-show="homeCountry != null">

answered Jul 13, 2015 at 8:04

SD.

9,6071 gold badge27 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shian JA Over a year ago

hmecountry is my div id or what? as i have to hide th complete div2

SD. Over a year ago

ng-model="homeCountry" will simply create a variable called homeCountry and bind it to the value of the SELECT. Read this for more info.

Collectives™ on Stack Overflow

How to show or hide a div in Angular Js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related