Angularjs - How to generate tables column dynamically onclick of ng-repeat element

Question

I'm getting such type of response from backend.

 [
    {
      "id": "1",
      "name": "Roshan",
      "av": "1000",
      "compname": [
      {
        "id": "43",
        "cname": "TCS",
        "constraint_value": "",
        "details": [ {
            "id": "2",
            "emp": "Intern"
          }],

        "salaries": [
          {
            "id": "1",
            "monthly_value": "1000",
            "annual_value": "12000"
          }
        ]
      }
     ]
    },

    {
     "id": "21",
     "name": "Mohan",
     "av": "1000",
     "compname": [
        {
          "id": "143",
          "cname": "Tata Constructions",
          "constraint_value": "",
          "details": [ {
              "id": "21",
              "emp": "Expeience"
            }],

          "salaries": [
            {
              "id": "10",
              "monthly_value": "1000",
              "annual_value": "12000"
            }
          ]
        },
        {
          "id": "11",
          "cname": "Mahindra",
          "details": [{
               "id": "2111",
              "emp": "Semi-skilled"
          }],
          "salaries": [
            {
              "id": "3",
              "monthly_value": "1200",
              "annual_value": "14400"
            }
          ]
        }
     ]
    }


    {
     "id": "121",
     "name": "Sohan",
     "av": "1000",
     "compname": [
       {
         "id": "453",
         "cname": "Roz Constructions",
         "constraint_value": "",
         "details": [ {
          "id": "211",
          "emp": "Fresher"
        }],

      "salaries": [
          {
            "id": "10",
            "monthly_value": "1000",
            "annual_value": "12000"
          }
        ]
    }
 ]

I am trying to create a table which will contain name. and on click of name, another column will be generated where it will show list of cname.

I tried to achieve it but I am not getting an idea of how I can display next column based on click of name.

Answer 1

You should really think of accordion for handling such case. Please refer to the small code below:

<table>
<thead>
    <th>Your Custom Header</th>
</thead>
<tbody ng-repeat="ae in allEmployee">
    <tr ng-click="showCompAcc=!showCompAcc">{{ae.name}}</tr>
    <tr ng-hide="showCompAcc">
        <table>
            <thead>
                <th>Company Names</th>
            </thead>
            <tbody>
                <tr ng-repeat="cn in ae.compname">{{cn.cname}}</tr>
            </tbody>
        </table>
    </tr>
</tbody>

This would expose an accordion on clicking every row. You cannot another column on the row click because of the json you are posting have different number of companies associated with each employee.

Please let me know if it helps!