AngularJS ng-repeat with multiple lists showing distinct values

Question

I am attempting to create some forms for our website using AngularJS. The page will have 2 check boxes "Form 1" and "Form 2". Form 1 will be checked by default. If you check Form 1 and Form 2, then the fields for Form 1 and Form 2 should be displayed. However, only distinct fields should be displayed.

Below is my json data.

[
    {
        "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": ""
            }
        ]
    }
]

For example, If you check the "Form 1" checkbox, the following input fields should be displayed: First Name Last Name Email

If you check the "Form 2" checkbox, the following input fields should be displayed: First Name Comments

If both checkboxes are checked, the following input fields should be displayed: First Name Last Name Email Comments

I am not sure where to start. Do I build up a separate JSON list first containing the unique form_field_list objects?

Answer 1

I think this gets you close to what you're looking for.

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];
    }
  }
}

I would essentially suggest keeping a tab on which fields have been selected, and continuously re-evaluate the child fields based on concatenating unique fields base on the form_field_id of the child.