中继器、开关和部分，天哪

Question

我正在尝试用webapi和angularjs制作一个表单设计师/构建器。我正在传递许多给定表单 ID 的字段。传递的键值对之一是字段应位于哪个部分。这些部分本质上是一个div.well，其中 h5{section} 作为部分标题。我想有 2-3 个包含多个字段的部分的问题，但我似乎无法找出构建我的部分的正确方法。 这是指向我正在处理的JSFiddle的链接

<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="myApp">
<div ng-controller="FormCtrl">
    <div class="well" style='overflow: hidden'>
        <div ng-repeat="formfield in form.FormsFields | filter:q">
            <div ng-switch on="formfield.Field.fieldType">
                <div ng-switch-when="Txt" class="span{{formfield.spanSize}}" style="margin-left: 5px; ">
                    <label for="" class="label label-info">{{formfield.Field.label}}</label>
                    <input type="text" class="input-block-level" section="{{formfield.section}}" name="" id="test">
                </div>
                <div ng-switch-when="Are" style="margin-left: 5px; ">
                    <br>
                    <div>
                        <label for="" class="label label-info">{{formfield.Field.label}}</label>
                        <textarea class="input-block-level" name="" section="{{formfield.section}}" id="test"></textarea>
                    </div>
                </div>
                    <h1 ng-switch-default>Error</h1>
            </div>
        </div>
    </div>
</div>

这是指向我正在处理的JSFiddle的链接

Answer 1

您可以使用下划线之类的内容首先将字段分组为多个部分，然后将它们映射到 UI 中易于绑定的内容。

$scope.sections = groupBySection(data);
function groupBySection(data) {
    var grouped = _.groupBy(data.FormsFields, 'section');
    return _.map(grouped, function(val, key){
        return { name: key, fields: val };
    });
};

当然还有一个jsFiddle显示它一切正常。