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一样，可以选择从文本框中删除所选项目。 stackoverflow用于添加标记也是一样的我很感激所有的投入和阅读时间。提前谢谢。

Answer 1

这对我有用：

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

非常感谢。

如何实现Gmail的撰写电子邮件到字段

1 个答案: