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与每位员工关联的公司数量不同，因此您无法在行上单击其他列。

请告诉我它是否有帮助！

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

1 个答案: