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

Я реализовал два div, где я использовал раскрывающийся элемент управления в div с именем div1. Я хочу скрыть div2 до тех пор, пока в раскрывающемся списке не будет выбрано любое значение. Я хочу знать, как скрыть или показать 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, и оно будет скрыто.


typescript angularjs ng-hide typescript1.4 typescript1.5
person Shian JA    schedule 13.07.2015    source источник
comment
Проверьте docs.angularjs.org/api/ng/directive/ngShow.   -  person Fissio    schedule 13.07.2015

Ответы (1)


arrow_upward
2
arrow_downward

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

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

Затем просто используйте ng-show (doc)

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

Вышеприведенное также эквивалентно:

<div id="div2" ng-show="homeCountry != null">
person SDekov    schedule 13.07.2015
comment
hmecountry - это мой идентификатор div или что? так как я должен скрыть полный div2 - person Shian JA; 13.07.2015
comment
ng-model="homeCountry" просто создаст переменную с именем homeCountry и привяжет ее к значению SELECT. Прочитайте это для получения дополнительной информации. - person SDekov; 13.07.2015