1

Boa tarde, Estou quebrando a cabeça para exibir a data conforme a seleção do usuário. Exemplo:

select 01 - aparece as datas "De/Até" select 02 - Somente "Até" select 03 - Somente "De" select 04 - Não aparece as datas

Eu criei um array, com os elementos dataInicio e dataFim, setando neles "s" ou "n" para exibição, porém, não sei se é o jeito certo de se fazer. Agora preciso chamar na tela, quando o usuário selecionar uma opção, ele exibir conforme a regra.

(Obs: estou usando um componente de data, que usa um template)

--

Notem que no componente spt-data-intervalo eu inseri um ng-show="filtro.Vigencia.dataInicio=='s' && filtro.Vigencia.dataInicio=='s'"

É possível tratar as demais regras pelo próprio ng-show?

Segue o código:

HTML

<div class="form-group">
    <label for="" class="col-md-2 control-label">Tipo:</label>
        <div class="col-md-4">
            <select 
                class="form-control"
                ng-model="filtro.Vigencia" 
                ng-options="tipoVigencia.nome for tipoVigencia in tipoVigencia" 
                ng-change="" required>
                <option value="">Selecione o Tipo</option>>
            </select>
        </div>
        <spt-data-intervalo 
            ng-show="filtro.Vigencia.dataInicio=='s' && filtro.Vigencia.dataInicio=='s'" 
            template-url="inline" 
            inicio="inicioVigencia" 
            label-data-inicio="Vigência de:*" 
            classe-label="col-md-2" 
            fim="fimVigencia" 
            label-data-fim="Até:">
        </spt-data-intervalo>
    </div>  

Controle

$scope.tipoVigencia=[
    {nome: 'select 01', dataInicio:'s', dataFim:'s'},
    {nome: 'select 02',dataInicio:'n', dataFim:'s'},
    {nome: 'select 03',dataInicio:'s', dataFim:'n'},
    {nome: 'select 04',dataInicio:'n', dataFim:'s'},
    {nome: 'select 05',dataInicio:'n', dataFim:'n'}
];

Template Data

<div>
    <label for="inicio" class="float-left control-label" ng-bind="labelDataInicio"></label>
    <div class="{{classeLabel}}">
        <spt-data id="inicio" model="inicio" maxima="fim" mascara="39/19/9999" placeholder="dd/mm/aaaa" required></spt-data>
    </div>
</div>
<div>
    <label for="" class="float-left control-label" ng-bind="labelDataFim">Até:*</label>
    <div class="{{classeLabel}}">
        <spt-data id="fim" model="fim" minima="inicio" mascara="39/19/9999" placeholder="dd/mm/aaaa" required></spt-data>
    </div>
</div>
1
  • Caso a resposta tenha lhe atendido, não esqueça de marca-la como escolhida para que possa ser utilizada por alguém com dúvida similar no futuro.
    – Sorack
    9/01/2017 às 17:09

1 Resposta 1

1

Utilize a diretiva ng-if da forma abaixo:

(function() {
  'use strict';

  angular
    .module('appExemplo', []);

  angular
    .module('appExemplo')
    .controller('ExemploController', ExemploController);

  ExemploController.$inject = [];

  function ExemploController() {
    var exemplo = this;
    exemplo.filtro = {};
    
    exemplo.tiposVigencia = [
      {nome: 'select 01', dataInicio:'s', dataFim:'s'},
      {nome: 'select 02', dataInicio:'n', dataFim:'s'},
      {nome: 'select 03', dataInicio:'s', dataFim:'n'},
      {nome: 'select 04', dataInicio:'n', dataFim:'s'},
      {nome: 'select 05', dataInicio:'n', dataFim:'n'}
    ];    
  }
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appExemplo">
  <div ng-controller="ExemploController as exemplo">
    <select class="form-control"
            ng-model="exemplo.filtro.Vigencia"
            ng-options="tipoVigencia.nome for tipoVigencia in exemplo.tiposVigencia"
            ng-change="" required>
      <option value="">Selecione o Tipo</option>
    </select>
    <BR>
    <BR>
    <div ng-if="exemplo.filtro.Vigencia.dataInicio === 's'">
      SUBSTITUA AQUI O CÓDIGO DO SEU DATEPICKER DA DATA DE INICIO
    </div>
    <BR>
    <div ng-if="exemplo.filtro.Vigencia.dataFim === 's'">
      SUBSTITUA AQUI O CÓDIGO DO SEU DATEPICKER DA DATA DE TÉRMINO
    </div>
  </div>
</div>

ngIf

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Em tradução livre:

A diretiva ngIf remove ou recria uma parte da árvore DOM baseada em uma {expressão}. Se a expressão determinada for falsa o elemento é removido do DOM, e se for verdadeira clona o elemento e reinsere no DOM.

Você também pode utilizar o ng-show substituindo o ng-if porém é importante ressaltar que o elemento estará no DOM caso opte por este método.

1
  • 1
    Show de bola! Utilizei o ng-if, desmembrei o template do componente e deu tudo certo! Quebrei a cabeça a manhã toda e a solução era bem simples...Vlw a dica! 9/01/2017 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .