单击时，选择列表中的第一项

Question

我有一个列表，我想在选择最后一个项目时选择列表的第一项。

有办法吗？

请问有办法解决吗？

<ion-select interface="popover" [ngModel]="selecteduser._id" (ngModelChange)="selectUser($event)" (ionChange)="onChange($event)">
    <ion-option *ngFor="let user of users" [value]="user._id">
      </ion-content>{{ getUserNickname(user }} </ion-option>
    <ion-option>Configuration</ion-option>
</ion-select>

所以我想当我单击我的配置时，它将选择列表的第一项

有我的ts

openConfigPage() {
    this.selectedUser = this.users[0];
    this.navCtrl.push(ConfigPage)
}

selectUser(userId: string) {
    this.selectedUser = this.users.find(b => b._id === userId)
    this.onSelect.emit(this.selectedUser)
}

有没有办法使用DOM？

Answer 1

在我看来，这里似乎没有太多信息。不要让这种情况阻止您日后再提出问题，只是在提出问题时请确保具体，并确保正确标记它。

由于您已经问过如何在javascript中完成此操作，因此以下是在javascript中如何执行此操作的答案：https://jsfiddle.net/gqvfx850/24/

我们的想法是将项目以循环形式添加到页面中，然后我们访问循环中的最后一个项目：

awk -i inplace '
BEGIN {
    split("12 15 102 11232",tmp)
    for (i in tmp) lines[tmp[i]]
}
NR in lines { gsub(/stringone/,"stringtwo") }
' filename

并为其单击时添加事件监听器

//if this is the last item in the loop
if(x === listItems.length - 1)
{

然后我们访问列表中的第一项，并进行检查

//add an event listener that also checks the first box when checking
//this one

    radioBtn.addEventListener("click", function()
    {
        //grab the class of all radio buttons
        var firstRadioBtn = document.getElementsByClassName("radio");

        //but you only want to change the first one
        firstRadioBtn = firstRadioBtn[0];

假设您的HTML也同样由javascript设置，那么这种想法就可以奏效，如果不是这种情况，请告诉我，我可以为您创建另一个小提琴。

我不熟悉angular，所以如果这种方法不适合您，请告诉我原因，然后看看是否可以提供其他帮助。

Answer 2

模板

Select Last One <select [(ngModel)]="selectedItem" (ngModelChange)="onSelect($event)">
  <option *ngFor="let item of items" [value]="item">{{item}}</option>
</select>

<br><br>
You have selected : {{selectedItem}}

组件

export class AppComponent  {
  selectedItem:string; 
  items = [
    'Purab', 'Pashchim', 'Uttar', 'Dakshin'
  ];

  onSelect(selectedItem) {
    let len = this.items && this.items.length;

    this.selectedItem = len && selectedItem === this.items[len-1]?
                          this.items[0]:selectedItem;
  }
}

演示：https://ng-on-lastselect-checkfirst.stackblitz.io

来源：https://stackblitz.com/edit/ng-on-lastselect-checkfirst