Angularjs

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

我正在尝试创建一个包含名称的 table。单击名称，将生成另一列，其中显示 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 - 如何动态生成表列 onclick of ng-repeat 元素

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

angularjs-ng-repeat

ng-repeat