Jump to content

AngularJS: Directiva ng-hide utilizando SelectBox


Go to solution Solved by williamjda,

Recommended Posts

Posted (edited)

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
  • Solution
Posted

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>

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
×
×
  • 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.