使用 ng-repeat 将 Materialise 行分成两半

Question

我正在使用 angularjs 创建动态表单。我有一个这样的json结构

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

而我的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>


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

问题是我只想将行分成两列。第三个控件应该从一个新行开始。需要帮助来实现这一目标。

当我将 col s6 添加到我的 ng-repeat 元素时，请注意工作，如图所示

Answer 1

为了达到您想要的输出，将 col s6 添加到重复的 div 以限制其大小 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 2

在第二个 ng-repeat div 中给出 class="col s6"。

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

Answer 3

您可以在.row.. 中根据需要重复任意数量的列（“col s6”）。

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

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

演示：http://www.codeply.com/go/LAfKFLVeTx