Angularjsのマスター詳細でユニークな値を設定する方法

Question

APIからデータを返し、AngularJSを使用してhtmlで表示します。問題は、SQLのクエリが、マスター詳細（部署と従業員）のような2つのテーブル間の結合を使用してデータを取得していることです。フィールドセットにデータを表示し、矢印を使用してその中にデータを表示したい場合は、それを展開するときに従業員を表示する必要があります。何が起こっているのは、マスターまたは部門が各従業員のために何度か必要であるということです。

SQLクエリ：

select distinct Staff_name as Sname , staff.staff_key , hr_Staff_Job.Dep_key, Dep_Structure.dep_LDesc from staff , hr_Staff_Job , Dep_Structure 
where staff_login = 2 and staff.Staff_key = hr_Staff_Job.Staff_key 
and hr_Staff_Job.current_flag = 1 and hr_Staff_Job.Dep_Key = Dep_Structure.Dep_Key 
and Staff.Staff_block = 0 order by hr_staff_job.Dep_Key , SName 

HTML：

<div class="wrapper"> 
     <fieldset id="field2"> 
      <table> 
       <tr ng-repeat="e in empdepts "> 
        <td ng-click="showContent = !showContent"> 
         <details ng-open="showContent"> 
          <summary>{{e.dep_LDesc}}</summary> 
          <p ng-bind="e.Sname"></p> 
         </details> 
        </td> 
       </tr> 
      </table> 
      <!--<details open ng-repeat=""> 
       <summary></summary> 
       <div ng-model="e.Sname"> 
        {{}} 
       </div> 
      </details>--> 
     </fieldset> 

     <fieldset id="field3"> 
      <details open> 
       <summary>Copyright 1999-2014.</summary> 
       <p> - by Refsnes Data. All Rights Reserved.</p> 
       <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> 
      </details> 
      <details open> 
       <summary>Copyright 1999-2014.</summary> 
       <p> - by Refsnes Data. All Rights Reserved.</p> 
       <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> 
      </details> 
     </fieldset> 
     <div id="breaker"></div> 
    </div> 

コントローラー：

LoadEmpDepts(); 
function LoadEmpDepts() 
{ 
    Assignments.getempdepts().then (function (response){ 

     $scope.empdepts = (response.data); 
     console.log($scope.empdepts); 
    }) 
} 

Answer 1

あなたはフィールドでグループにangular-filterを使用し、細部にそれらを表示することができますビュー。

var MyApp = angular.module("MyApp",['angular.filter']); 

とngのリピートはあるべき、

<tr ng-repeat="e in empdepts | groupBy:'dep_LDesc'"> 
     <td ng-click="showContent = !showContent"> 
         <details ng-open="showContent"> 
          <summary>{{e[0].dep_LDesc}}</summary> 
          <ng-template ng-repeat="employee in e"> 
            <p> {{employee.Sname}}</p> 
          </ng-template> 
         </details> 
     </td> 
</tr>