Angularjs - 如何在点击ng-repeat元素时动态生成表列

Question

我从后端得到这种类型的响应。

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

我正在尝试创建一个包含名称的表。 然后单击名称，将生成另一列，其中将显示 cname 列表。

我试图实现它，但我不知道如何根据单击名称显示下一列。

Answer 1

你真的应该想到手风琴来处理这种情况.请参考下面的小代码：

<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>

这将在单击每一行时公开一个手风琴。您不能单击行上的另一列，因为您发布的 json 具有与每个员工关联的不同数量的公司。

如果有帮助，请告诉我！