如何實現 Gmail 的 Compose Email to 字段

Question

請幫忙。 我想實現這一目標：

我在這里創建了一個 CodePen：

<a href="http://codepen.io/babafemiwebmaster/pen/vgOjyd">CodePen Link </a>
=======================================
<script>
var app = angular.module('app', ['ui.bootstrap']);
app.controller("MainController", function ($scope) {
    $scope.recs = [];
    $scope.clss = [
        {
            "id": 1,
            "lastname": "Primary I",
            "alias": 'J2'
        },
        {
            "id": 2,
            "lastname": "JSS 11",
            "alias": 'J1'

        }
    ];
    $scope.stff = [
        {
            "id": 1,
            "firstname": "Babafemi",
            "lastname": "Adigun",
            "isactive": true
        },
        {
            "id": 4,
            "firstname": "Owner",
            "lastname": "Staff",
            "isactive": true
        }
    ]
    $scope.all = function () {
        angular.forEach($scope.clss, function (value, key) {
            $scope.recs.push(value.lastname);
        });
        angular.forEach($scope.stff, function (value, key) {
            $scope.recs.push(value.lastname);

        });


    }
});
</script>
<div ng-app="app" ng-controller='MainController'>
<form role="form">
    <div class="form-group">
        <label for="rec">Recipients:</label>

        <div class="input-group" ng-init=all()>
            <span class="input-group-addon"><i class="fa fa-graduation-cap">   </i></span>
            <input type="text" class="form-control" id="rec" ng- model="smsbody.recipient"
                   typeahead="lastname for lastname in recs | filter:$viewValue | limitTo:8" class="form-control">
        </div>

    </div>

    <div class="form-group">
        <label for="from">From</label>
        <input type="title" class="form-control" id="from" placeholder="Your  Name (11 xters)" maxlength=""
               ng-model="smsbody.from"/>
    </div>

    <div class="form-group">
        <label for="message">Message {{maxLength}}</label>
        <span>Characters left: {{256 - message.length}}</span>
        <textarea class="form-control" rows="5" ng-maxlength="maxLength"  id="message"
                  ng-model="smsbody.message"></textarea>
    </div>

    <button type="submit" class="btn btn-default" ng-click="sendSms()">::Send::</button>
</form>
</div>

我已經使用 angular 的 typeahead 功能實現了自動完成。 但是，我需要將所選用戶添加到文本框中，Gmail 的做法與 Gmail 相同，並帶有從文本框中刪除所選項目的選項。 同樣的事情 stackoverflow 用來添加標簽我很欣賞所有的輸入，以及閱讀這篇文章所花費的時間。 提前致謝。

Answer 1

這對我有用：

<a href="https://material.angularjs.org/latest/demo/chips">Angular Material</a>

謝謝都一樣。