2017-01-07 15 views
-2

親切にお手伝いします。 私はこれを達成するようになる: similar to Gmail's to fieldGmailのメール作成方法フィールド

私はここに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> 

私はの角度入力補完機能を使用してオートコンプリートを達成しています。 しかし、テキストボックスに選択したアイテムを削除するオプションを使用してGmailと同じ方法でテキストボックスに追加する必要があります。 同じことstackoverflowはタグを追加するために使用しています 私はすべての入力とこれを読むのに費やした時間を感謝します。 ありがとうございます。

答えて

0

これが私の仕事:すべて同じ

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

感謝を。

関連する問題