[Resolvido] AngularJS: Directiva ng-hide utilizando SelectBox

[williamjda 0]

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>

 

Editado 4 de Outubro de 2018 por williamjda

[williamjda 0]

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>