Help with ion-select ngModel automatically selects all the boxes

millerjn · April 29, 2017, 3:27am

Hello!

Because when you select and press ok has one and go back to open I activate all the ion-option?

Note: I do not speak English, please write well for a better translation into Spanish.


<ion-item>
  <ion-label>Watering Mode</ion-label>
  <ion-select [(ngModel)]="plato.kind">
    <ion-option *ngFor="let item of modeKeys" [value]="item">{{item.key}}{{item.precio}}</ion-option>
  </ion-select>
</ion-item>

pedidos.ts

plato={
kind: ‘key’

}
modeKeys = [
{‘key’:“pablo”,“precio”:“500”},
{‘key’:“juan”,“precio”:“500”},
{‘key’:“lili”,“precio”:“500”},
{‘key’:“juan”,“precio”:“500”},
{‘key’:“juan”,“precio”:“500”},

]

<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/ionicframework/original/3X/1/d/1db28e04c831a467f873e97f6db12daf8565b279.png" width="690" height="387">

rapropos · April 29, 2017, 3:46am

Check out a brand-new scratch project. Copy enough code from your app to this scratch project so that the problem can be replicated. Post that code - AS TEXT, NOT IMAGES, and properly formatted with code block fences. Be sure to include everything needed to reproduce the problem.

Sujan12 · April 29, 2017, 11:01am

(I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.)

This doesn’t make too much sense in English. Could you maybe rerwrite it or just post this sentence in Spanish please? (Eso sentencia no es comprensible, por favor escribe otra vez en Espanol. Gracias. [or something like that, my Spanish really sucks])

millerjn · April 29, 2017, 11:45am

lo que pasa es que necesito guardar el valor del json capturado por el ion-select y no todo el json como se muestra en la imagen me muestra que selecciona todos sin importar que opción elija

pedido.html


<ion-header>

  <ion-navbar>
    <ion-title>Has tu pedido</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding >

  <ion-item>
   <ion-label>Menu</ion-label>
<ion-select [(ngModel)]="plato.checked" (ionChange)="optionsFn(item) ">

  <ion-option [value]="item" *ngFor="let item of optionsPlatos"    >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>

<!--Carnes-->
 <ion-item>
   <ion-label>Carnes</ion-label>
<ion-select [(ngModel)]="carnes.checked" (ionChange)="optionsFn(item);">

  <ion-option [value]="item" *ngFor="let item of optionsCarnes" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>



<!---Sin-->
   <ion-item>
   <ion-label>Sin</ion-label>
<ion-select [(ngModel)]="sin.checked" (ionChange)="optionsFn(item);">

  <ion-option [value]="item" *ngFor="let item of optionsSin" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>

<!---Poco-->
   <ion-item>
   <ion-label>Poco</ion-label>
<ion-select [(ngModel)]="poco.checked" (ionChange)="optionsFn(item);">

  <ion-option [value]="item" *ngFor="let item of Poco" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>

  <!--Añadir-->
   <ion-item>
   <ion-label>Adiciona</ion-label>
<ion-select [(ngModel)]="adicionar.checked" (ionChange)="optionsFn(item)" >

  <ion-option [value]="item" *ngFor="let item of Adicionar" multiple="false" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>








  <button ion-button (click)="Guardar()">Hacer pedido</button>



</ion-content>

pedido.ts

@Component({
  selector: 'page-pedidos',
  templateUrl: 'pedidos.html',
})
export class Pedidos {

pedidos: FirebaseListObservable<any>;
toppings:any;


  priceOp
  cheke
 
  nameOp


   optionsPlatos =  [
          {"name": "Sencillo","price": "100.00",checked: false},
          {"name": "Normal","price": "200.00",checked: false},

                    ];
  optionsCarnes =  [
          {"name": "res","price": 100.00,checked: false},
          {"name": "cerdo","price": 200.00,checked: false},
          {"name": "pezcado","price": 200.00,checked: false},
          {"name": "chorizo","price": 200.00,checked: false},
          {"name": "morcilla","price": 200.00,checked: false},
          {"name": "pollo","price": 200.00,checked: false},
                    ];  
   optionsSin =  [
          {"name": "Sin ensalada",checked: false},
          {"name": "Sin principio",checked: false},
          {"name": "Sin arroz",checked: false},
          {"name": "Sin tajada",checked: false},
          {"name": "Sin arepa",checked: false},
                    ];
   Poco =  [
          {"name": "Poco arroz",checked: false},
          {"name": "Poca ensalada",checked: false},
                    ];
  Adicionar =  [
          {"name": "Adiciona res","price": 100.00,checked: false},
          {"name": "Adiciona adcerdo","price": 200.00,checked: false},
          {"name": "Adiciona pezcado","price": 200.00,checked: false},
          {"name": "Adiciona chorizo","price": 200.00,checked: false},
          {"name": "Adiciona morcilla","price": 200.00,checked: false},
          {"name": "Adiciona pollo","price": 200.00,checked: false},
          {"name": "Adiciona arroz","price": 200.00,checked: false},
          {"name": "Adiciona arepa","price": 200.00,checked: false},
                    ];

                    



plato:any= this.optionsPlatos;

carnes:any=this.optionsCarnes;

sin:any=this.optionsSin;

poco:any=this.Poco;
adicionar:any=this.Adicionar;



public optionsFn(nuevo): void { 
    console.log(this.plato);

    let item = this.plato;

   this.cheke=item.checked;

    this.priceOp = item.price;
    
    this.nameOp = item.name;
    return nuevo
   
  }






   constructor(public navCtrl: NavController,public alertCtrl:AlertController, public database:AngularFireDatabase ) {
    this.pedidos = this.database.list('/menu');

  }

  Guardar(){
    





    this.pedidos.push({

     Platito: this.plato,
    
      
     Carnita: this.carnes,

     Adicionar: this.adicionar,

     SinCarnita: this.sin,

     poco: this.poco

    
  });


  // this.pedidos.push(this.carnes);
   // this.pedidos.push(this.toppings);
    
    

  }
}

rapropos · April 29, 2017, 8:09pm

multiple goes on ion-select, not ion-option. Follow the examples in the documentation. Stop using any, and you do not need an onChange handler. You want something that looks more like:

export interface FoodItem {
  name: string;
  price?: number;
}

optionsPlatos: FoodItem[] = [
  {name: "Sencillo", price: 100},
  {name: "Normal", price: 200},
];

plato: FoodItem;

<ion-select [(ngModel)]="plato">
<ion-option *ngFor="let p of optionsPlatos" [value]="p">{{p.name}}: {{p.price}}</ion-option>
</ion-select>

millerjn · April 29, 2017, 9:03pm

Json values are not seen

rapropos · April 29, 2017, 9:07pm

Are you sure you copied the code properly? It works for me:

millerjn · April 29, 2017, 9:18pm

Thank you, they appear, but I close and re-open and select everything, I need to remain selected

rapropos · April 29, 2017, 9:21pm

If you’re saying you want multiple selection to be possible, add multiple="true" to the <ion-select> and change plato to be FoodItem[]. Again, all this is in the documentation.

millerjn · April 29, 2017, 9:36pm

I do not want multiple selection, look open what you did dale select ok and return to habrilo select everything automatically

rapropos · April 29, 2017, 9:42pm

Are you still doing this?

plato:any= this.optionsPlatos;

Don’t do that. It makes no sense. I said:

plato: FoodItem;

That means “leave it uninitialized”. <ion-select> is smart enough to cope with that.

millerjn · April 29, 2017, 9:52pm

No, I’m doing the same example that you gave me, look habre the app choose a product dale ok and reopen and you will see that they are all automatically selected

rapropos · April 29, 2017, 10:17pm

No, they aren’t. Only the one I chose before is selected.

millerjn · April 29, 2017, 10:23pm

Well thank you very much, can you help me with something more please how would the sum of the prices be made?

<ion-item-sliding *ngFor="let item of meVendi|async" >
      <ion-item>
        <ion-label>
          <h1>Carlos Pidio</h1>
         
            <ion-list>
              <h2>{{item.Platito.name}} &nbsp;&nbsp;${{item.Platito.price}}</h2>
              <h2>{{item.carnita.name}} &nbsp;&nbsp;${{item.carnita.price}}</h2>
              <h2>{{item.Adicionar.name}} &nbsp;&nbsp;${{item.Adicionar.price}}</h2>
            </ion-list>  
        </ion-label>
      </ion-item>
      
   
    </ion-item-sliding>

Sujan12 · April 30, 2017, 8:43am

No, that is a different problem - please open a new topic and describe the problem fully. Thanks, I will close this topic now.