Display datepicker as selected

Question

Good afternoon, I’m racking my brain to display the date as the user selects. Example:

select 01 - "From/To" dates appear select 02 - Only "Until" select 03 - Only "From" select 04 - No dates shown

I created an array, with the elements dataInicio and dataFim, setting them "s" or "n" for display, however, I don’t know if this is the right way to do it. Now I need to call on the screen, when the user selects an option, it display as per the rule.

(Note: I am using a date component, which uses a template)

--

Note that in the spt-data-interval component I entered an ng-show="filter.Vigenti.dataInicio==’s' && filter.Vigenti.dataInicio==’s'"

It is possible to treat the other rules by ng-show itself?

Follows the code:

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>  

Control

$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>

Answer 1

Use the directive ng-if in the form below:

(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.

In free translation:

The ngIf directive removes or recreates a part of the DOM tree based on a {expression}. If the given expression is false, the element is removed from the DOM, and if it is true, it clones the element and re-enters the DOM.

You can also use the ng-show replacing the ng-if but it is important to note that the element will be in the DOM if you choose this method.