Angular Material 联系人芯片

2025年3月17日 | 阅读 3 分钟

Angular 指令 md-contact-chips 是一个基于 MD-chips 构建的输入控件，它使用 md-auto-complete 元素。联系人芯片组件有一个表达式，列出联系人。用户选择其中一个，然后将其添加到可用芯片的列表中。

<md-contact-chips> 是一个基于 md-chips 的输入组件。它主要用于标签。

属性

下表列出了 md-contact-chips 的各种属性的参数和描述。

序号	参数	描述
1	* ng-model	它用于绑定项目列表。
2	* md-contacts	这应该从联系人匹配测试 $ query 中返回。
3	* md-contact-name	* md-contact-name 是联系人对象的字段名称，它表示联系人的姓名。
4	* md-contact-email	联系人对象的字段名称表示联系人的电子邮件地址。
5	* md-contact-image	联系人对象的字段名称表示联系人的图像。
6	placeholder	发送用于输入的占位符文本。
7	secondary-placeholder	如果列表中至少有一个项目，占位符文本将发送到显示的输入。
8	filter-selected	它用于从自动完成的建议列表中过滤选定的联系人。

示例 1

该示例演示了 md-contact-chips 指令的使用以及 Angular 联系人芯片的用途。

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { MatChipsModule } from '@angular/material/chips'; 
      
import { AppComponent } from './app.component'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  @NgModule({ 
  imports: 
  [ BrowserModule, 
    FormsModule, 
    MatChipsModule,
    BrowserAnimationsModule], 
  declarations: [ AppComponent ], 
  bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

app.component.html

<p>Default Chip List</p>
  
<mat-chip-list aria-label="Fish selection">
    <mat-chip color="primary" selected>
        Primary theme chip
    </mat-chip>
      
    <mat-chip color="accent" selected>
        Accent theme chip 
    </mat-chip>
      
    <mat-chip color="warn" selected>
        Warn theme chip
    </mat-chip>
      
    <mat-chip>Default theme chip </mat-chip>
</mat-chip-list>
<br><br><br>
  
<p>Stacked Chip List</p>
  
<mat-chip-list class="mat-chip-list-stacked"
    aria-label="Fish selection">
      
    <mat-chip color="primary" selected>
        Primary theme chip 
    </mat-chip>
      
    <mat-chip color="accent" selected>
        Accent theme chip
    </mat-chip>
      
    <mat-chip color="warn" selected>
        Warn theme chip
    </mat-chip>
      
    <mat-chip>Default theme chip </mat-chip>
</mat-chip-list>

输出

示例 2

app.module.html

<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoContactChips" ng-app="MyApp">

  <md-content class="md-padding autocomplete" layout="column">
    <md-contact-chips ng-model="ctrl.contacts" md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i" filter-selected="ctrl.filterSelected" placeholder="To">
    </md-contact-chips>

    <md-list class="fixedRows">
      <md-subheader class="md-no-sticky">Contacts</md-subheader>
      <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts" ng-if="ctrl.contacts.indexOf(contact) < 0">
        <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}">
        <div class="md-list-item-text compact">
          <h3>{{contact.name}}</h3>
          <p>{{contact.email}}</p>
        </div>
      </md-list-item>
      <md-list-item class="md-2-line contact-item selected" ng-repeat="(index, contact) in ctrl.contacts">
        <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}">
        <div class="md-list-item-text compact">
          <h3>{{contact.name}}</h3>
          <p>{{contact.email}}</p>
        </div>
      </md-list-item>
    </md-list>

  </md-content>
</div>

app.component.css

.chipsdemoContactChips md-content.autocomplete {
  min-height: 250px; }
.chipsdemoContactChips .md-item-text.compact {
  padding-top: 8px;
  padding-bottom: 8px; }
.chipsdemoContactChips .contact-item {
  box-sizing: border-box; }
  .chipsdemoContactChips .contact-item.selected {
    opacity: 0.5; }
    .chipsdemoContactChips .contact-item.selected h3 {
      opacity: 0.5; }
  .chipsdemoContactChips .contact-item .md-list-item-text {
    padding: 14px 0; }
    .chipsdemoContactChips .contact-item .md-list-item-text h3 {
      margin: 0 !important;
      padding: 0;
      line-height: 1.2em !important; }
    .chipsdemoContactChips .contact-item .md-list-item-text h3, .chipsdemoContactChips .contact-item .md-list-item-text p {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
  @media (min-width: 900px) {
    .chipsdemoContactChips .contact-item {
      float: left;
      width: 33%; } }
.chipsdemoContactChips md-contact-chips {
  margin-bottom: 10px; }
.chipsdemoContactChips .md-chips {
  padding: 5px 0 8px; }
.chipsdemoContactChips .fixedRows {
  height: 250px;
  overflow: hidden; }

app.component.ts

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('ContactChipDemoCtrl', DemoCtrl);

  function DemoCtrl ($timeout, $q) {
    var self = this;

    self.querySearch = querySearch;
    self.allContacts = loadContacts();
    self.contacts = [self.allContacts[0]];
    self.filterSelected = true;

    /**
     * Search for contacts.
     */
    function querySearch (query) {
      var results = query ?
          self.allContacts.filter(createFilterFor(query)) : [];
      return results;
    }

    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(contact) {
        return (contact._lowername.indexOf(lowercaseQuery) != -1);;
      };

    }

    function loadContacts() {
      var contacts = [
        'Marina Augustine',
        'Oddr Sarno',
        'Nick Giannopoulos',
        'Narayana Garner',
        'Anita Gros',
        'Megan Smith',
        'Tsvetko Metzger',
        'Hector Simek',
        'Some-guy withalongalastaname'
      ];

      return contacts.map(function (c, index) {
        var cParts = c.split(' ');
        var contact = {
          name: c,
          email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '@example.com',
          image: ' ' + index
        };
        contact._lowername = contact.name.toLowerCase();
        return contact;
      });
    }
  }
})();

输出

下一个主题Angular Material Stepper

← 上一个下一个 →

Angular Material 联系人芯片

属性

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular Material

Angular Material 联系人芯片

属性

示例 1

示例 2

相关帖子

Angular Material 分割线

Angular Mat 排版

Angular Mat vs. Bootstrap

Angular Material 树

Angular Material 教程

Angular Material Feb-Toolbar

Angular Material 步骤条

Angular Material 日期选择器

Angular Material 输入框

Angular Material 单选按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器