Unique select options

Ionic Framework ionic-v3
1

Hello,

I’ve found something that i would like to implement in my ionic 3 app.
https://codepen.io/charliepage/pen/eBKrdQ

When you choose a option in one of the select boxes, the selected option wil be disabled in the others. Can someone help me or point me in the right direction?

thank u

Here is my code.

constructor(public http: Http) {
  this.data = {};
  this.data.select1 = "";
  this.data.select2 = "";
  this.data.select3 = "";
  this.loadSaved();
  this.loadUsers();
}

loadUsers() {
  this.http.get("json url 1").map(res => res.json()).subscribe(users => {
    this.users = users;
  });
}

loadSaved() {
  this.http.get("json url 2").map(res => res.json()).subscribe((data) => {
    this.data.select1 = data.NAME1;
    this.data.select2 = data.NAME2;
    this.data.select3 = data.NAME3;
  });

}


<ion-list>
  <ion-item>
    <ion-label>User 1</ion-label>
    <ion-select [(ngModel)]="data.select1">
      <ion-option *ngFor="let user of users" value="{{user.id}}">{{user.name}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>User 2</ion-label>
    <ion-select [(ngModel)]="data.select2">
      <ion-option *ngFor="let user of users" value="{{user.id}}">{{user.name}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>User 3</ion-label>
    <ion-select [(ngModel)]="data.select3">
      <ion-option *ngFor="let user of users" value="{{user.id}}">{{user.name}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

json 1

[
    {
      "id": "1",
      "name": "user1"
    },
    {
      "id": "2",
      "name": "user2"
    },
    {
      "id": "3",
      "name": "user3"
    }
  ]

json 2

{
    "USER1": "1",
    "USER2": "2",
    "USER3": "3"
}

my ionic info


Ionic:

   Ionic CLI          : 6.1.0 (C:\Users\Gebruiker\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.4
   @ionic/app-scripts : 3.2.3

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : no whitelisted plugins (10 plugins total)

Utility:

   cordova-res : 0.8.0
   native-run  : 0.2.9

System:

   NodeJS : v11.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10
2

Someone else gave me the right answer.

Here it is.

<ion-list>
    <ion-item>
      <ion-label>Pizza</ion-label>
      <ion-select placeholder="Select Pizza" [(ngModel)]="data.select1">
        <ion-select-option value=''>Select</ion-select-option>
        <ion-select-option *ngFor="let user of users" [value]="user.id"
          [disabled]="user.id == data.select2 ||user.id == data.select3">{{user.name}}</ion-select-option>
      </ion-select>
    </ion-item>


    <ion-item>
      <ion-label>Pizza</ion-label>
      <ion-select placeholder="Select Pizza" [(ngModel)]="data.select2">
        <ion-select-option value=''>Select</ion-select-option>
        <ion-select-option *ngFor="let user of users" [value]="user.id"
          [disabled]="user.id == data.select1 ||user.id == data.select3">
          {{user.name}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Pizza</ion-label>
      <ion-select placeholder="Select Pizza" [(ngModel)]="data.select3">
        <ion-select-option value=''>Select</ion-select-option>
        <ion-select-option *ngFor="let user of users" [value]="user.id"
          [disabled]="user.id == data.select1 ||user.id == data.select2">{{user.name}}</ion-select-option>
      </ion-select>
    </ion-item>

  </ion-list>