javascript - 如果 angularjs 中的值为 true，则绘制打开关闭标签

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

将字段分成几部分的决定取决于什么？ 如果决定取决于演示的某些方面，我认为您不需要像现在这样使用模型数据。我的意思是你可以编写简单的 html 而不需要 ng-repeat 指令。

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

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>