javascript - 使用 Material 的 Angular 动态内联形式

Question

我正在尝试借助棱 Angular Material 构建动态形式。要求是我需要一行中有两个输入列，并且输入值的数量可以是动态的。有什么方法可以让我使用 ng-repeat 将两个输入框排成一行来构建此表单。

谢谢。感谢您的帮助。

Answer 1

您可以使用 Flexbox .我不确定此解决方案的效率如何，但它肯定会给您一个开始。

CSS

    .myrow {
       display: flex;
       flex-wrap: wrap;
    }
   .mygrid {
       flex: 1;
       min-width: 25%;
       padding : 10px;
   }

HTML

<form name="userFormTwo" novalidate>
      <div class="myrow">
        <div class="form-group" ng-repeat="user in formDataTwo.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }">
          <div class="mygrid">
            <ng-form name="userFieldForm">
              <label>{{ user.name }}'s Email</label>
              <input type="email" class="form-control" name="email" ng-model="user.email" required>
              <p class="help-block" ng-show="userFieldForm.email.$invalid">Valid Email Address Required</p>
            </ng-form>
          </div>
        </div>
      </div>
    </form>

Demo Plunker

您也可以使用 Bootstrap 类(row 和 col-xs-12)，但是您必须调整您的 ng-repeat 以 2 的增量循环，以在一行中容纳一对数组元素，为此最终需要在 Controller 部分做一些额外的工作。