Page tree

Quando for utilizado o atributo totvs-radio na tag <totvs-field> ', a tag assumirá o comportamento de um campo de 'radio', mais conhecido como 'radio button', permitindo a seleção de um único valor entre os disponíveis através do atributo t-options.

Release

Componente Totvs Radio disponível na versão 12.1.14


Sintaxe

<totvs-field totvs-radio>
</totvs-field>

Propriedades

NomeTipoPadrãoDescrição
t-optionsArray-

(Obrigatório) Esta propriedade deve conter um array de objetos, que deve ser definido no controller responsável pela a view onde se encontra o elemento.

Os atributos desses objetos são:

  • Value | String ou Number - O valor que será atualizado o model, caso for clicado.
  • Label | String - É o texto que representara o tal valor.
  • Disabled | Boolean ou String - É equivalente ao ng-disabled, pode ser informado um valor booleano (true ou false) como também pode ser informado em String uma variável do controller do mesmo jeito que seria utilizado no HTML, por exemplo 'controller.isRadio'.
    Observação: caso não passar nenhum valor, o padrão será false, e caso for passado ng-disabled diretamente no totvs-field, os radio buttons assumirá o ng-disabled do totvs-field.

 

HTML
<totvs-field totvs-radio
   label="Totvs Radio"
   t-options="controller.options"
   ng-model="controller.radio">
</totvs-field>
Controller
var controller = this;
 
controller.radio = null;
controller.isRadio = true;
controller.options = [{value: 1, label: 'Sim', disabled: false}, 
					  {value: 2, label: 'Não', disabled: false},
				      {value: 3, label: 'Ambos', disabled: 'controller.isRadio'}];
 

 

Exemplo de Uso

Exemplo
<totvs-field totvs-radio
   label="Totvs Radio"
   t-options="controller.options"
   ng-model="controller.radio">
</totvs-field>

 

Resultado

Quando for desktop:

Quando for mobile:

Dependência