如何在物化md-container中使用textarea和其他元素？

Question

我有readonly我想在字段中顯示的電子郵件列表，所以我試圖在md-input-container內使用textarea使用angularjs ng-repeat但它會拋出錯誤only one input allowed in the md-input-container。我是新來實現任何想法什麼是使用AngularMaterial Ui實現這種方法的更好方法？

main.html中

<div layout="row" layout-margin style="height:100px; overflow: scroll;"> 
    <md-input-container flex="100"> 
     <div><label>Bcc</label></div> 
     <textarea flex="100" ng-repeat="email in notifyCtrl.bcc" name="email" readonly="true"> 
       </textarea> 
    </md-input-container> 
</div> 

ctrl.js

$scope.notifyCtrl.bcc = ["abc@domain.com","xyz@domain.com"] 

Answer 1

因爲你需要欄位中顯示多個電子郵件我建議使用<md-chips>代替textarea的

<div layout layout-sm="column" layout-margin > 
       <md-chips flex ng-model="notifCtrl.bcc" class="md-primary" readonly="true" placeholder="Bcc" delete-button-label="Remove Tag" delete-hint="Press delete to remove tag" secondary-placeholder="Bcc"> 
       </md-chips> 
</div> 

Answer 2

你如果適合您的需要，可以嘗試使用角度材質用戶界面的虛擬重複：

HTML：

 <md-content layout="column"> 
     <md-virtual-repeat-container id="vertical-container"> 
      <div md-virtual-repeat="email in notifyCtrl.bcc" class="repeated-item" flex=""> 
       {{email}} 
      </div> 
     </md-virtual-repeat-container> 
     </md-content> 

    </div> 

CSS：

.virtualRepeatdemoVerticalUsage #vertical-container { 
    height: 292px; 
    width: 100%; 
    max-width: 400px; } 

.virtualRepeatdemoVerticalUsage .repeated-item { 
    border-bottom: 1px solid #ddd; 
    box-sizing: border-box; 
    height: 40px; 
    padding-top: 10px; } 

.virtualRepeatdemoVerticalUsage md-content { 
    margin: 16px; } 

.virtualRepeatdemoVerticalUsage md-virtual-repeat-container { 
    border: solid 1px grey; } 

.virtualRepeatdemoVerticalUsage .md-virtual-repeat-container .md-virtual-repeat-offsetter div { 
    padding-left: 16px; } 

JS：

(function() { 
    'use strict'; 

    angular 
     .module('app',['ngMaterial']) 
     .controller('AppCtrl', function($scope) { 
     $scope.notifyCtrl = {}; 
     $scope.notifyCtrl.bcc = ['abc@domain.com','xyz@domain.com']; 
}); 
})(); 

附加一個工作代碼筆她E：https://codepen.io/anon/pen/JNBjLx

來源： https://material.angularjs.org/latest/demo/virtualRepeat