Jump to content
Sign in to follow this  
williamjda

[Resolvido] AngularJS: Directiva ng-hide utilizando SelectBox

Recommended Posts

williamjda

Boa tarde amigos.

Tenho uma duvida sobre um directiva do angularJS. Tenho um formulário onde tenho um selectBox e quero que, quando for selecionado a opção Pessoa Juridica os campos do fomulario da pessoa fisica sejam ocultos. E vice e versa.

Eu consigui fazer isso mas utilizando um CheckBox, porem gostaria de entender como fazer isso utilizando um selectBox...

Fico no aguardo e desde já, muito obrigado.
 

<div role="form">

   Pesso fisica <input type="checkbox" ng-model="myVar">

    <field id="nomecliente" label="*Nome completo" grid="12 6 4" placeholder="Informe o nome completo" model="cliCtrl.cliente.nomecliente" readonly="cliCtrl.tabDelete"></field>
    <field id="datanascimento" label="*Data de nascimento" grid="12 6 4" type='date'model="cliCtrl.cliente.dadosPF[0].datanascimento" readonly="cliCtrl.tabDelete"></field>
    <field id="cpf" label="*CPF" grid="12 6 4" placeholder="Informe o CPF" model="cliCtrl.cliente.dadosPF[0].cpf" readonly="cliCtrl.tabDelete"></field>

    <field id="rg" label="*RG" grid="12 6 4" placeholder="Informe o RG" model="cliCtrl.cliente.dadosPF[0].rg" readonly="cliCtrl.tabDelete"></field>
    <field id="orgaoemissor" label="Orgão emissor" grid="12 6 4" placeholder="Informe o orgão emissor" model="cliCtrl.cliente.dadosPF[0].orgaoemissor" readonly="cliCtrl.tabDelete"></field>
    <field id="dataexpedicao" label="Data de expedição" grid="12 6 4" type='date' model="cliCtrl.cliente.dadosPF[0].dataexpedicao" readonly="cliCtrl.tabDelete"></field>
    <field id="naturalidade" label="Naturalidade" grid="12 6 4" placeholder="Informe a naturalidade" model="cliCtrl.cliente.dadosPF[0].naturalidade" readonly="cliCtrl.tabDelete"></field>

    <div ng-hide="myVar">
      <field id="razaosocial" label="*Razão Social" grid="12 6 4" placeholder="Informe a razão social" model="cliCtrl.cliente.dadosPJ[0].razaosocial" readonly="cliCtrl.tabDelete"></field>
      <field id="nomefantasia" label="Nome fantasia" grid="12 6 4" placeholder="Informe o nome fantasia" model="cliCtrl.cliente.dadosPJ[0].nomefantasia" readonly="cliCtrl.tabDelete"></field>
    
      <field id="cnpj" label="*CNPJ" grid="12 6 4" placeholder="Informe o CNPJ" model="cliCtrl.cliente.dadosPJ[0].cnpj" readonly="cliCtrl.tabDelete"></field>
      <field id="inscricaoestadual" label="Inscrição Estadual" grid="12 6 4" placeholder="Informe a Inscrição Estadual" model="cliCtrl.cliente.dadosPJ[0].inscricaoestadual" readonly="cliCtrl.tabDelete"></field>
      <field id="inscricaomunicipal" label="Inscrição Municipal" grid="12 6 4" placeholder="Informe a Inscrição Municipal" model="cliCtrl.cliente.dadosPJ[0].inscricaomunicipal" readonly="cliCtrl.tabDelete"></field>
    </div>

   
  </div>

  <!-- Botão - inculuir, exluir, altear e gravar-->
  <div ng-include="'cliente/button.html'"></div>
</div>

 

Edited by williamjda

Share this post


Link to post
Share on other sites
williamjda

Boa tarde a todos....

Consegui fazer. O código ficou assim...

<div role="form">
    <div class="box-footer">
      <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="form-group" >
        <label>Tipo de cadastro</label>
        <select ng-model="tipocadastro" ng-init="tipocadastro='pf'" id="tipocadastro" class="form-control" grid="12 6 4" >
          <option value="pf" selected>Pessoa fisíca</option> 
          <option value="pj">Pessoa jurídica</option>
        </select>
      </div>
    </div>
 
    <div ng-hide="tipocadastro == 'pj'">
      <field id="nomecliente" label="*Nome completo" grid="12 6 4" placeholder="Informe o nome completo" model="cliCtrl.cliente.nomecliente" readonly="cliCtrl.tabDelete"></field>
      <field id="datanascimento" label="*Data de nascimento" grid="12 6 4" type='date'model="cliCtrl.cliente.dadosPF[0].datanascimento" readonly="cliCtrl.tabDelete"></field>
      <field id="cpf" label="*CPF" grid="12 6 4" placeholder="Informe o CPF" model="cliCtrl.cliente.dadosPF[0].cpf" readonly="cliCtrl.tabDelete"></field>

      <field id="rg" label="*RG" grid="12 6 4" placeholder="Informe o RG" model="cliCtrl.cliente.dadosPF[0].rg" readonly="cliCtrl.tabDelete"></field>
      <field id="orgaoemissor" label="Orgão emissor" grid="12 6 4" placeholder="Informe o orgão emissor" model="cliCtrl.cliente.dadosPF[0].orgaoemissor" readonly="cliCtrl.tabDelete"></field>
      <field id="dataexpedicao" label="Data de expedição" grid="12 6 4" type='date' model="cliCtrl.cliente.dadosPF[0].dataexpedicao" readonly="cliCtrl.tabDelete"></field>
      <field id="naturalidade" label="Naturalidade" grid="12 6 4" placeholder="Informe a naturalidade" model="cliCtrl.cliente.dadosPF[0].naturalidade" readonly="cliCtrl.tabDelete"></field>
    </div>

    <div ng-hide="tipocadastro == 'pf'">
      <field id="razaosocial" label="*Razão Social" grid="12 6 4" placeholder="Informe a razão social" model="cliCtrl.cliente.dadosPJ[0].razaosocial" readonly="cliCtrl.tabDelete"></field>
      <field id="nomefantasia" label="Nome fantasia" grid="12 6 4" placeholder="Informe o nome fantasia" model="cliCtrl.cliente.dadosPJ[0].nomefantasia" readonly="cliCtrl.tabDelete"></field>
    
      <field id="cnpj" label="*CNPJ" grid="12 6 4" placeholder="Informe o CNPJ" model="cliCtrl.cliente.dadosPJ[0].cnpj" readonly="cliCtrl.tabDelete"></field>
      <field id="inscricaoestadual" label="Inscrição Estadual" grid="12 6 4" placeholder="Informe a Inscrição Estadual" model="cliCtrl.cliente.dadosPJ[0].inscricaoestadual" readonly="cliCtrl.tabDelete"></field>
      <field id="inscricaomunicipal" label="Inscrição Municipal" grid="12 6 4" placeholder="Informe a Inscrição Municipal" model="cliCtrl.cliente.dadosPJ[0].inscricaomunicipal" readonly="cliCtrl.tabDelete"></field>
    </div>
  </div>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.