Как показать или скрыть div в Angular Js

Question

Я реализовал два div, где я использовал какой-то элемент управления вниз в div с именем div1. Я хочу скрыть div2 до тех пор, пока ни одно значение не будет выбрано в drop down.I want знать, как скрыть или показать div на ng-change или пока не будет выбрано какое-либо значение div2 не должно отображаться. Код: -

<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> 

Теперь я хочу до тех пор пока и если значение не выбрано мой ниспадающего div2 будет скрыт.

Answer 1

Сначала назначьте переменную в свой список выбора. Например

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

Тогда просто использовать ng-show (doc)

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

выше также эквивалентно:

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