角度使用材料的動態內聯表格

Question

我想借助角度材料來構建動態表格。需求是我需要一行兩個輸入列，並且輸入值的數量可以是動態的。有沒有什麼辦法可以使用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

您還可以使用引導類（row和col-xs-12），但隨後你必須調整你的ng-repeat到以2的增量循環，以適應在一行中記錄一對數組元素，這最終需要在控制器部分上額外付出一些努力。

Answer 2

由於您正在使用引導，您需要使用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>