Teilen Sie die Materialize-Reihe mit ng-repeat in die Hälfte.

Question

Ich erstelle dynamische Formen mit angularjs. Ich habe eine json Struktur wie diese

$scope.steps = [ 
    { 
     stepNo: 1, 
     schema: 
      { 
       fields: [ 
        { type: 'text', mandatory: false, label: 'First Name' }, 
        { type: 'text', mandatory: false, label: 'Last Name' }, 
        { type: 'checkbox', mandatory: false, label: 'Last Name' }, 
       ] 
      } 
    }, 
    { 
     stepNo: 2, 
     schema: 
      { 
       fields: [ 
        { type: 'text', mandatory: false, label: 'Address Name' }, 
       ] 
      } 
    }, 
]; 

und meine HTML-Struktur ist wie folgt

<div ng-repeat="step in steps"> 
    <form name="stepForm[{{$index}}]" novalidate> 
     <div class="row"> 
      <div ng-repeat="f in step.schema.fields track by $index" ng-cloak> 


<div ng-switch-when="text"> 
        <ng-form name="userFieldForm"> 
         <i class="material-icons prefix">account_circle</i> 
         <label for="{{f.field}}" ng-class="{'active':view.preserveData.model[f.field]}">{{f.header}}</label> 
         <input type="text" class="form-control" ng-maxlength="f.maxlength" maxlength="{{f.maxlength}}" name="{{f.field}}" ng-model="view.model[f.field]" ng-required="f.isMandatory" ng-pattern="f.pattern" placeholder="{{f.placeholder}}"> 
         <p class="error-message" ng-show="userFieldForm.{{f.field}}.$invalid && f.isMandatory && view.submitted">{{f.error}}</p> 
        </ng-form> 
       </div> 
       <div ng-switch-when="time"> 
        <ng-form name="userFieldForm"> 
         <i class="material-icons prefix">account_circle</i> 
         <label for="{{f.field}}" ng-class="{'active':view.preserveData.model[f.field]}">{{f.header}}</label> 
         <input type="time" class="form-control" ng-maxlength="f.maxlength" maxlength="{{f.maxlength}}" name="{{f.field}}" ng-model="view.model[f.field]" ng-required="f.isMandatory" ng-pattern="f.pattern" placeholder="{{f.placeholder}}"> 
         <p class="error-message" ng-show="userFieldForm.{{f.field}}.$invalid && f.isMandatory && view.submitted">{{f.error}}</p> 
        </ng-form> 
       </div> 
      </div> 
     </div> 
    </form> 
</div> 

Problem ist, dass ich Zeile in nur zwei Spalten teilen möchten. Die dritte Kontrolle sollte mit einer neuen Zeile beginnen. Brauchen Sie Hilfe, um dies zu erreichen.

Hinweis zu arbeiten, wenn ich col s6 mein ng-repeat Element hinzufügen, wie in diesem Bild gezeigt

Answer 1

Sie können beliebig viele Spalten ("col s6") wiederholen, wie in der .row benötigt ..

<div ng-repeat="step in steps"> 
     <form name="stepForm[{{$index}}]" novalidate=""> 
      <div class="row"> 
       <div class="col s6" ng-repeat="f in step.schema.fields track by $index" ng-cloak=""> 
        //divide into two , rows only contain two controls 
       </div> 
      </div> 
     </form> 
</div> 

Um die Etiketten/Eingänge mit Materialise haben:

<div class="row"> 
     <div class="col s6" ng-repeat="f in step.schema.fields track by $index"> 
      <label ng-if="f.type!='checkbox'">{{f.label}}</label> 
      <input type="{{f.type}}" id=""/> 
      <label ng-if="f.type=='checkbox'">{{f.label}}</label> 
     </div> 
</div> 

Demo : http://www.codeply.com/go/LAfKFLVeTx

Answer 2

, um die gewünschte Ausgabe zu erreichen, col s6 zu dem div hinzufügen, die seine Größe wiederholt werden immer zu begrenzen http://materializecss.com/grid.html

<div ng-repeat="step in steps"> 
    <form name="stepForm[{{$index}}]" novalidate> 
     <div class="row"> 
      <div ng-repeat="f in step.schema.fields track by $index" ng-cloak class="col s6"> 
       //divide into two , rows only contain two controls 
      </div> 
     </div> 
    </form> 
</div> 

Answer 3

Give class = "col s6" in der zweiten ng-repeat div.

<div ng-repeat="step in steps"> 
    <form name="stepForm[{{$index}}]" novalidate> 
     <div class="row"> 
      <div class="col s6" ng-repeat="f in step.schema.fields track by $index" ng-cloak> 
       //divide into two , rows only contain two controls 
      </div> 
     </div> 
    </form> 
</div>