Question

我想要在字段中显示readonly个电子邮件列表，因此我尝试使用angularjs textarea在md-input-container内使用ng-repeat，但会抛出错误{ {1}}。我是新手，想知道使用AngularMaterial Ui实现这种方法的更好方法是什么？

main.html中

only one input allowed in the md-input-container

ctrl.js

<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>

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

如果符合您的需要，您可以从角度材质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

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

2 个答案: