Question

假设我有一个表格，它会迭代某些字段。

我想在容器中包装一些字段，以便我可以将表单拆分为多个部分。

我试图将field_open = true放在我要开始打开div的项目下，然后在该容器的最后一个字段下field_close = true，然后重复此过程。

<form name="{{form.form_name}}" id="{{form.form_id}}">
    <div ng-if="field.field_open == true" class="halfCol">
    <div ng-repeat="field in form.form_fields">
        <div class="{{field.field_class}}">
            <field-directive field="field"></field-directive>
        </div>
    </div>
    </div ng-if="field.field_close == true">
</form>

显然这不起作用，但我想知道如何实现这个目标？

以下HTML是如何呈现的：

<form name="test" id="test">
    <div class="halfCol">
        <label for="apple">Apple</label>
        <input type="text" name="apple" id="apple" />
        <label for="fruit">Fruit</label>
        <input type="text" name="fruit" id="fruit" />
    </div>
    <div class="halfCol">
        <label for="dog">Dog</label>
        <input type="text" name="dog" id="dog" />
    </div>
</form>

上面的html应该来自以下数据。

var data = {
  "form_name": "test",
  "form_fields": [
    {
      "field_title": "Apple",
      "field_open" : false
      "field_open" : true
    }{
      "field_title": "Fruit",
    },{
      "field_title": "Dog",
      "field_close" : true
      "field_open" : true
    }
]}

我或多或少都在寻找一种方法来将某些元素包装在同一个字段范围内。

Answer 1

分段中分区的决定取决于什么？如果决定取决于演示的某些方面，我认为您不需要像使用那样使用模型数据。我的意思是你可以在没有ng-repeat指令的情况下编写简单的html。

如果您坚持使用模型数据，您的模型结构将如下所示。

var data = {
    "form_name": "test",
    "form_sectinons": [
        {
            "section_title": "section 1",
            "fields": [
                {"field_title": "Apple"},
                {"field_title": "Fruit"},
            ]
        },
        {
            "section_title": "section 2",
            "fields": [
                {"field_title": "Dog"},
            ]
        }
    ]
}

而Html将如下所示。

<form>
    <div ng-repeat="section in data.form_sections">
        <div ng-repeat="field in section.fields" class="halfCol">
            <field-directive field="field"></field-directive>
        </div>
    </div>
</form>

如果angularjs中的值为true，则绘制打开的结束标记

1 个答案: