javascript - 如何在 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>

Controller :

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

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

Answer 1

您可以使用angular-filter按字段进行分组并将其显示在详细信息 View 上。

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

ng-repeat 应该是，

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