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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
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.