Question

我正试图在有棱角的材料的帮助下建立一个动态的形式。要求是我需要在一行中有两个输入列，输入值的数量可以是动态的。是否有任何方法可以使用ng-repeat在一行中使用两个输入框来构建此表单。

感谢。任何帮助表示赞赏。

Answer 1

You can use Flexbox. I am not sure how efficient this solution is, but it will surely give you a start.

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

You can also use bootstrap class(row and col-xs-12), but then you'll have to tweak your ng-repeat to loop with the increment of 2, to accommodate a pair of array elements in a single row, which would ultimately require some extra effort on the controller part just for that.

Answer 2

当您使用bootstrap时，您需要使用form-inline类。请检查以下代码。

<form name="userFormTwo" class="form-inline" novalidate>

        <div class="form-group" ng-repeat="user in formDataTwo.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }">
        <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>

    </form>

角度使用材料的动态内联形式

2 个答案: