javascript - How to initially set a value in ng-select? - Stack Overflow

admin 管理员组

文章数量: 1086019

I have ng-select with list of values. If i click on selected value and click clear , need to set first option .Please help me how to sort it out . /appponent.ts

<ng-select class="" [items]="assigneeStatus" name="status_filter_id"
           bindLabel="lookup_label" bindValue="_lookup_id" placeholder="Assignee Status"
           [(ngModel)]="searchAssigneeObj.status_filter_id" [hideSelected]="true"
           #status_filter_id="ngModel">
    <ng-template ng-label-tmp let-item="item">
        <span>{{item.lookup_label ||  'All'}}</span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-search="searchTerm"
                 let-index="index">
        <span>{{item.lookup_label || ''}}</span>
    </ng-template>
</ng-select>

I have ng-select with list of values. If i click on selected value and click clear , need to set first option .Please help me how to sort it out . https://stackblitz./edit/ng-select-wdcg5a?file=app/app.ponent.ts

<ng-select class="" [items]="assigneeStatus" name="status_filter_id"
           bindLabel="lookup_label" bindValue="_lookup_id" placeholder="Assignee Status"
           [(ngModel)]="searchAssigneeObj.status_filter_id" [hideSelected]="true"
           #status_filter_id="ngModel">
    <ng-template ng-label-tmp let-item="item">
        <span>{{item.lookup_label ||  'All'}}</span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-search="searchTerm"
                 let-index="index">
        <span>{{item.lookup_label || ''}}</span>
    </ng-template>
</ng-select>

• javascript
• angular
• typescript

Share Improve this question Follow edited Feb 15 at 7:49 Mahdi Zarei 7,51688 gold badges3232 silver badges6464 bronze badges asked Sep 25, 2021 at 5:12 SanjanaSanjana 14111 gold badge11 silver badge1111 bronze badges 4

• can you explain more ? the question is not clear – programoholic Commented Sep 25, 2021 at 8:10
• I have more values in ng-select dropdown. I need to set default option (first option) to the ng select . If i click the clear icon , need to set first option . How can i acheive ? – Sanjana Commented Sep 25, 2021 at 10:14
• check my answer – programoholic Commented Sep 25, 2021 at 13:30
• Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Bot Commented Oct 3, 2021 at 12:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

There is no basic way to achieve this natively in ng-select.

You can define callback of (clear) event and add your first item in the array to achieve that goal.

HTML:

<ng-select [items]="cities3"
           bindLabel="name"
           multiple = true
           placeholder="Select at least one city"
           [(ngModel)]="selectedCities"
           (clear)="clearSelect()">
  <ng-template ng-label-tmp let-item="item">
    <b>{{item.name}}</b> is cool
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-index="index">
    <b>{{item.name}}</b>
  </ng-template>
</ng-select>    

TS:

export class AppComponent {
  selectedCities = [];
  cities3 = [
    {
      id: 0,
      name: 'Vilnius',
    },
    {
      id: 2,
      name: 'Kaunas',
    },
    {
      id: 3,
      name: 'Pavilnys',
    },
  ];

  constructor() {}

  addCustomUser = (term) => ({ id: term, name: term });

  public clearSelect() {
    this.selectedCities = [];
    this.selectedCities.push({
      id: 0,
      name: 'Vilnius',
    });
  }
}

See the codes:

multiple: true -> stackblitz

multiple: false -> stackblitz

You can achieve this using clear method.

in your ponent add below code :

public selectedCity;  

constructor() {
        this.selectedCity = [this.cities3[0]];
      }

then in the ng-select add clear event as below :

<ng-select 
     [items]="cities3"
     bindLabel="name"
     multiple = true
     placeholder="Select city"
     (clear)="resetCalculations();"
     [(ngModel)]="selectedCity">
            <ng-template ng-label-tmp let-item="item">
                <b>{{item.name}}</b> is cool
            </ng-template>
            <ng-template ng-option-tmp let-item="item" let-index="index">
                <b>{{item.name}}</b>
            </ng-template>
  </ng-select>  

and then register the handler as below :

 resetCalculations() {
    this.selectedCity = [this.cities3[0]];
  }

here is the working example : Working Demo

本文标签： javascriptHow to initially set a value in ngselectStack Overflow