如何在物化 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

如果适合您的需要，您可以从 Angular Material UI 尝试虚拟重复：

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'];  
});
})();

在此处附加一个工作代码笔：https://codepen.io/anon/pen/JNBjLx

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