How to make a unique value in Master details in Angularjs

Question

I am returning data from API and show it on html using AngularJS. The problem is that the SQL query is bringing a data using a join between 2 tables like Master Details (departments and employees). I want to show data in fieldset and inside it in using an arrow and when expand it, should show employees. What is happening is that the Master or departments are requring several times for each employee.

SQL Query:

 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>

The Controller:

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

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

Answer 1

You can use angular-filter to group by the field and display them on the details view.

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

and the ng-repeat should be,

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