使用单个ng-repeat在两个不同的DIV

Question

我正在开发一个Angular项目，我有一个HTML模板，我希望实现这些功能。

HTML ：

<div class="row">
    <div class="col-md-8" ng-controller="getAllBenchersController">
        <div class="panel panel-default" >
            <div class="panel-heading dark-overlay">
                <svg class="glyph stroked clock">
                    <use xlink:href="#stroked-clock" />
                </svg> Talentpool
            </div>



            <div class="panel-body showdetails" style="display:none" >
                <div class="profile">
                    <a class="btn btn-default btn-sm pull-right showback top" style="margin:0px 10px 10px 0px" title="" data-placement="top" data-toggle="tooltip" data-original-title="back to list"><span class="glyphicon glyphicon-list"></span></a>
                    <div style="margin-bottom:15px" class="row">
                        <div class="col-xs-12 col-sm-8">
                            <h2> {{employee.firstName}} </h2>
                            <p> <strong>Title:</strong> Web Designer / UI.</p>
                            <p>
                                <strong>Primary Skills :</strong> Read, out with friends, listen to music, draw and learn
                                new things.
                            </p>
                            <p> <strong class="mrs">Skills:</strong><span class="label label-green mrs">html5</span><span class="label label-green mrs">css3</span><span class="label label-green mrs">jquery</span></p>
                        </div>
                        <div class="col-xs-12 col-sm-4 text-center">
                            <figure>
                                <img src="../../NewUI/img/user.png" alt="" style="display: inline-block" class="img-responsive img-circle">
                                <figcaption class="ratings">
                                    <p><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star-empty"></span></a></p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    <div class="row text-center divider">
                        <div class="col-xs-12 col-sm-4 emphasis">
                            <h2> <strong>20,7K</strong></h2>
                            <p> <small>Followers</small> </p>
                            <button class="btn btn-success btn-block"> <span class="glyphicon glyphicon-plus-sign"></span> Follow </button>
                        </div>
                        <div class="col-xs-12 col-sm-4 emphasis">
                            <h2> <strong>245</strong></h2>
                            <p> <small>Following</small> </p>
                            <button class="btn btn-warning btn-block"> <span class="glyphicon glyphicon-user"></span> Profile </button>
                        </div>
                        <div class="col-xs-12 col-sm-4 emphasis">
                            <h2> <strong>43</strong></h2>
                            <p> <small>Snippets</small> </p>
                            <div class="btn-group dropup">
                                <button type="button" data-toggle="dropdown" class="btn btn-danger dropdown-toggle"> <span class="glyphicon glyphicon-cog"></span> Options </button>
                                <ul role="menu" class="dropdown-menu pull-right text-left">
                                    <li><a href="#"><span class="fa fa-envelope"></span>&nbsp; Send an email</a></li>
                                    <li><a href="#"><span class="fa fa-list"></span>&nbsp; Add or remove from a list</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#"><span class="fa fa-warning"></span>&nbsp; Report this user for spam</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#" role="button" class="btn disabled">Unfollow</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="panel-body showdetails1 showbackdetails" id="details">
                <!--<div class="pull-right">
                    <div class="btn-group" style="margin-bottom:15px;">
                        <button type="button" class="btn btn-success btn-filter" data-target="available">Available</button>
                        <button type="button" class="btn btn-warning btn-filter" data-target="billed">Billed</button>
                        <button type="button" class="btn btn-danger btn-filter" data-target="reject">Reject</button>
                        <button type="button" class="btn btn-default btn-filter" data-target="all">All</button>
                    </div>
                </div>-->
                <div class="table-container" ng-repeat="employee in data">
                    <table class="table table-filter">
                        <tbody>
                            <tr data-status="available"  class="showbackdetails showdetails1">
                                <td>
                                    <div class="ckbox">
                                        <input type="checkbox" id="checkbox1">
                                        <label for="checkbox1"></label>
                                    </div>
                                </td>
                                <td>
                                    <a href="javascript:;" class="star"> <i class="glyphicon glyphicon-star"></i> </a>
                                </td>
                                <td id="details">
                                    <div class="media">
                                        <a href="#" class="pull-left"> <img src="../../NewUI/img/user.png" class="media-photo"> </a>
                                        <div class="media-body">
                                            <span class="media-meta pull-right">dec 13, 2016</span>
                                            <h4 class="title "> {{employee.firstName}} <span class="pull-right available">(available)</span> </h4>
                                            <p class="summary">been moved to Talentpool...</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
<!--/.row--> 

<script type="text/javascript">
    $(document).ready(function () {

    $('#details').click(function () {
            $('.showdetails').show();
            $('.showdetails1').css('display', 'none').hide();
    });
    $('.showback').click(function() {
             $('.showbackdetails').show();
            $('.showdetails').css('display', 'none').hide();
    });
});
</script>

我担心代码中的两个div：

<div class="panel-body showdetails" style="display:none" >

和<div class="panel-body showdetails1 showbackdetails" id="details">

此<div class="panel-body showdetails1 showbackdetails" id="details"> DIV包含一个数据表，该表使用ng-repeat从JSON端点填充数据。控制器在DIV外部分配给上述DIV。默认情况下隐藏第一个DIV <div class="panel-body showdetails" style="display:none" >。

点击数据表中的元素后，DIV将被隐藏，并显示第一个DIV。数据表包含员工列表，其目的是在用户点击员工的任何人的姓名时打开包含详细员工信息的div。

使用Jquery可以做到这一点：

<script type="text/javascript">
    $(document).ready(function () {

    $('#details').click(function () {
            $('.showdetails').show();
            $('.showdetails1').css('display', 'none').hide();
    });
    $('.showback').click(function() {
             $('.showbackdetails').show();
            $('.showdetails').css('display', 'none').hide();
    });
});
</script>

现在的问题是，当我将ng-repeat分配给外部DIV时，配置文件DIV没有打开。我需要ng-repeat循环遍历DIV，作为显示员工列表的数据，员工详细信息来自单个端点控制器。

控制器：

myApp.controller('getAllBenchersController', ['$scope', 'dashboardServices', 'dataTable', '$window', '$timeout', '$filter', function ($scope, dashboardServices, dataTable, $window, $timeout, $filter) {
    dashboardServices.getAllBenchers().then(function (result) {
      var mainData = result.data;
        $scope.showSkills = {};
        //Calculate Experience
        $scope.CalDate = function (date1, date2) {
            var diff = Math.floor(date1.getTime() - date2.getTime());
            var secs = Math.floor(diff / 1000);
            var mins = Math.floor(secs / 60);
            var hours = Math.floor(mins / 60);
            var days = Math.floor(hours / 24);
            var months = Math.floor(days / 31);
            var years = Math.floor(months / 12);
            months = Math.floor(months % 12);
            days = Math.floor(days % 31);
            hours = Math.floor(hours % 24);
            mins = Math.floor(mins % 60);
            secs = Math.floor(secs % 60);
            var message = "";
            if (days <= 0) {
                //message += secs + " sec ";
                //message += mins + " min ";
                message = "Since today";
            } else {
                if (years > 0) {
                    message += years + " years ";
                }
                if (months > 0 || years > 0) {
                    message += months + " months ";
                }
                message += days + " days";
            }
            return message
        };


        $scope.getExp = function (date) {
            date = new Date($filter('date')(date, "yyyy/MM/dd"));
            var currdate = new Date($filter('date')(new Date(), "yyyy/MM/dd"));

            var exp = $scope.CalDate(currdate, date);
            return exp;
        }

        //Calculate Experience end
        employeeTalentPoolServices.getAllBlocked().then(function (result) {
            for (var i = 0; i < result.data.length; i++) {
                mainData.push(result.data[i]);

            }
            $scope.data = mainData;
        });
        $scope.account = [];
        $scope.employeeAccount = null;
        $scope.showhide = true;
        //$scope.testFilter = function (item) {
        //    return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked');
        //}
        $scope.blockEmployee = function (id) {

            employeeTalentPoolServices.blockEmployee(id);
            $scope.showhide = false;
        }
        if (!result.data.error) {
            dataTable.render($scope, '', "talentPoolList", result.data);
        }
    });



    employeeTalentPoolServices.getCustomerAccounts().then(function (result) {
        $scope.accountData = result.data;
    });

}]);

服务：

myApp.factory('dashboardServices', ['apiServices', function (apiServices) {

    var factoryDefinitions = {
        getTodaysStats: function (state) {

            return apiServices.getFromIndecomm('/WorkflowEntity?status=' + state).success(function (data) { return data; });
        },
        getRecentNews: function () {
            return apiServices.getFromTalentPool('').success(function (data, status, headers, config) {
                return data;
            }).error(function (data, status) {
                return data;
            });
        },
        getLastFiveBenchers: function (status) {

            return apiServices.getFromTalentPool('/EmployeeState?state=' + status + '&pageNumber=1&pageSize=5').success(function (data) { return data; });
        },
        getAllBenchers: function () {
            return apiServices.getFromTalentPool('/EmployeeState?state=Available&pageNumber=0&pageSize=0').success(function (data) { return data; });
        }
    }

    return factoryDefinitions;
}
]);

请帮我解决这个问题。我想要一个解决方案来实现这一目标。