javascript - AngularJS ng-repeat 具有多个显示不同值的列表

Question

我正在尝试使用 AngularJS 为我们的网站创建一些表单。该页面将有 2 个复选框“表格 1”和“表格 2”。默认情况下会检查表格 1。 如果您选中“表格 1”和“表格 2”，则应显示“表格 1”和“表格 2”的字段。但是，只应显示不同的字段。

下面是我的 json 数据。

[
    {
        "form_id": 1,
        "form_name": "Form 1",
        "form_field_list": [
            {
                "form_field_id": 1,
                "form_field_label": "First Name",
                "form_field_value": ""
            },
            {
                "form_field_id": 2,
                "form_field_label": "Last Name",
                "form_field_value": ""
            },
            {
                "form_field_id": 3,
                "form_field_label": "Email",
                "form_field_value": ""
            }
        ]
    }
    {
        "form_id": 2,
        "form_name": "Form 2",
        "form_field_list": [
            {
                "form_field_id": 1,
                "form_field_label": "First Name",
                "form_field_value": ""
            },
            {
                "form_field_id": 2,
                "form_field_label": "Last Name",
                "form_field_value": ""
            },
            {
                "form_field_id": 4,
                "form_field_label": "Comments",
                "form_field_value": ""
            }
        ]
    }
]

例如，如果您选中“Form 1”复选框，则应显示以下输入字段: 名 姓 电子邮件

如果您选中“Form 2”复选框，则应显示以下输入字段: 名 评论

如果两个复选框都被选中，则应显示以下输入字段: 名 姓 电子邮件 评论

我不知道从哪里开始。我是否首先构建一个单独的 JSON 列表，其中包含唯一的 form_field_list 对象？

Answer 1

我认为这会让您更接近您正在寻找的东西。

http://jsfiddle.net/v61ky2to/1/

var selectedFormFields = {};

$scope.uniqueFields = {};

$scope.toggleFormField = function(formField) {
  // Determine whether or not this field should be added or removed
  if (selectedFormFields[formField.form_id]) {
    delete(selectedFormFields[formField.form_id]);
  } else {
    selectedFormFields[formField.form_id] = formField.form_field_list;
  }

  // Re-evaluate all of the unique fields with the updated selected form fields
  $scope.uniqueFields = {};
  for (var i in selectedFormFields) {
    for (var j in selectedFormFields[i]) {
      $scope.uniqueFields[selectedFormFields[i][j].form_field_id] = selectedFormFields[i][j];
    }
  }
}

我基本上建议保留已选择字段的选项卡，并根据子字段的 form_field_id 连接唯一字段，不断重新评估子字段。