Divide Materialize row into half using ng-repeat

Question

I am creating dynamic forms with angularjs . I have a json structure like this

$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' },
               ]
            }
    },
];

and my html structure is like this

<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 is that I want to divide row into only two columns . Third control should begin with a new row . Need help to achieve this.

Note working when I add col s6 to my ng-repeat element as shown in this image

Answer 1

You can repeat as many columns ("col s6") as needed in the .row..

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

To have the labels/inputs with Materialize:

<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