搜索栏上的名称,由复选框添加

时间:2017-06-11 17:24:12

标签: html css ionic-framework sass ionic2

	<ion-header no-border style="border-bottom: 1px solid #EDEDED;">
  <ion-navbar  no-border-bottom>
    <ion-title>
      Nova Mensagem
    </ion-title>
     <ion-buttons end>
      <button  ion-button icon-only>
        <span style="color:#5D5A56">Seguinte</span>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content class="contentbg">



    <div style="padding:15px;background-color:white;" class="customborder2">
    <span style="font-size:16px;color:#5D5A56;margin-right:5px;margin-top:10px">Para:</span>

    <ion-chip *ngFor="let lista of selecionados; let i = index"  #chip1 style="background-color:#F0F0F0;color:#5D5A56;margin-right:5px">
  <ion-label>{{lista}}</ion-label>
  <button ion-button clear (click)="delete(chip1, listaIds[i], lista, check[i])">
    <ion-icon name="close-circle"></ion-icon>
  </button>
</ion-chip>


</div>

<div style="border-bottom: 1px solid #F3F3F3;background-color:white">
  <ion-searchbar mode="md"
  [(ngModel)]="searchQuery"
  [showCancelButton]="shouldShowCancel"
  placeholder="Pesquisar utilizadores"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)"> 
    </ion-searchbar>
    </div>

 <ion-label style="margin-left:15px;margin-top:30px;">
          <span class="strong" style="text-transform:uppercase;font-size:13px;color:#999999">{{titulo}}</span>
        </ion-label>

  <ion-list>

  <ion-item  *ngFor="let sugestao of sugeridos"  class="customborder customborder2 animacao" >
    <ion-label>
      <ion-avatar style="float:left">
          <div style="border-radius:50%;width:40px;height:40px;background-position:center;background-size:cover" [style.background-image]="'url(http://bacotaco.web.ua.pt/img/' + sugestao.foto + ')'"></div>
        </ion-avatar>
        <div style="float:left;position:relative;top:3px;left:10px">
          <div style="text-overflow:ellipsis;overflow: hidden;"><p style="font-size:16px;color:black">{{sugestao.nomeC}}</p></div>
          <p class="sub" style="color:#AAAAAA;font-size:14px;">{{sugestao.tipo}}</p>
          </div>
    </ion-label>
    <ion-checkbox item-right color="tint"  (click)="selecionado(sugestao.id, sugestao.nome, sugestao.index)"  [(ngModel)]="sugestao.selecionado"></ion-checkbox>
  </ion-item>

  

</ion-list>

</ion-content>

您可以通过搜索来从数据库创建的列表中选择人员。

_

结构如下:

带有“To:”的div,其中的名称是在(To:Mike例如)之后添加的;

搜索栏;

带有搜索人员的离子列表,每个人都有一个复选框。

Here's a screenshot.

_

当您检查某人时,该名称将作为跨度添加到“To:”所在的div中。取消选择将删除名称。可以通过搜索栏搜索人员,更新列表。

我的问题是:如何简单地将名称添加到搜索栏中,而不是使用单独的div,将光标移动到右侧

与Facebook的Messenger或Instagram上的内容一样 - check picture

0 个答案:

没有答案