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

TileEntity tile = worldIn.getTileEntity(pos);
if(tile instanceof TE_MusicPlayer)
{
    TE_MusicPlayer musicplayer = (TE_MusicPlayer)tile;
    //musicplayer.add/removeDisk logic here
}

Answer 3

您可以根据需要在.row中重复多列（＆＃34; col s6＆＃34;）

<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

使用ng-repeat将Materialise行分为一半

3 个答案: