1
<ion-list radio-group style="margin-bottom:10px;" [(ngModel)]="orcamento.tipo" name="tipo" #tipo="ngModel">

    <ion-item>
        <ion-label>Consumidor</ion-label>
        <ion-radio value="consumidor" checked="true"></ion-radio>

    </ion-item>

    <ion-item>
        <ion-label>Revenda</ion-label>
        <ion-radio value="revenda"></ion-radio>
    </ion-item>

</ion-list>

Queria que a primeira opção desses radio inputs viesse selecionada como padrão, mas no template ele fica assim:

Imagem

Porque a opção não está vindo selecionada?

3
  • jsfiddle.net/yk62zsxv/55
    – Enio
    Commented 13/07/2017 às 17:53
  • Só aproveitando o seu jsfiddle, quando eu instalei o ionic, nao veio com aquele arquivo app.js (que em todos os tutoriais se usa ele), e em nenhum arquivo a programação veio nesse "modelo": (angular.module('ionicApp', ['ionic']).controlle). Tem a ver com a versão do ionic? Commented 13/07/2017 às 18:02
  • Sim. Ele e utilizado para ter acesso aos componentes no ionic
    – Enio
    Commented 13/07/2017 às 18:14

3 Respostas 3

1

No caso de não usar Angular ou Vue etc, mete o valor value="o value da selecção correspondente" no elemento

Neste exemplo "a" é a opção pré selecionada.

 <ion-radio-group value="a">
   <ion-radio value="a" class="a">a</ion-radio><br />
   <ion-radio value="b" class="b">b</ion-radio><br />
   <ion-radio value="c" class="c">c</ion-radio><br />
 </ion-radio-group>

0
0

Perceba que dentro do seu ion-list possui um ngModel que é onde será armazenado o valor da opção selecionada, cada ion-radio possuí um value, para você inicializar o component com um selecionado, basta inicializar a variável "orcamento.tipo" com o value do ion-radio que você deseja que comece selecionado, exemplo:

-- Seu component.ts --

orcamento.tipo = 'consumidor';

Adicionando este código em seu constructor ou no seu onInit do component já deve vir selecionado, não precisando do checked no html, pois será feito o bind do valor do ngModel do radio selecionado.

UPDATE

-- Seu component.ts --

orcamento = { tipo: 'consumidor', ... seus outros atributos de orcamento };

O erro aconteceu pois seu orcamento é um objeto, veja onde você o inicializa e no campo tipo defina com o value do ion-radio desejado.

Na verdade quando você seleciona um ion-radio ele faz isso por trás, adiciona o value do ion-radio no ngModel, então se você inicializar o valor dele com um selecionado, ele vai buscar dentro do ion-list qual ion-radio tem o value informado e vai o selecionar.

3
  • Apareceu um erro: ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'tipo' of undefined Commented 13/07/2017 às 17:21
  • Corrigi a resposta. Commented 13/07/2017 às 17:40
  • Agora sim! Muito obrigado!! Commented 13/07/2017 às 17:43
0

Não precisa desse true, é só passar o "checked"

<ion-radio value="consumidor" checked></ion-radio>

Caso não de certo, tente

<ion-radio value="orderBy1" [checked]="orderBy1">
1
  • Apenas com o checked também não foi :/ Também tentei com [checked]="consumidor" e não apareceu nada... Commented 13/07/2017 às 17:17

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 .