Angularjs - テーブル列を動的に生成する方法ng-repeat要素のonclick

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が各従業員に関連付けられている会社の数が異なるため、行クリックの他の列をクリックすることはできません。

助けてくれたら教えてください！