如何在angularjs ng-repeat中将子行显示为嵌套表？

Question

我正在尝试在表中创建一个嵌套表，该表显示属性列表（每个属性可以将一些子节点作为子行）。我这样做的原因是我希望为孩子们提供独立的搜索和排序功能。 HTML看起来像这样：

<div>
<table>
    <thead>
        <tr>
            <th></th>
            <th data-ng-click="sortData('name')">Name <div data-ng-class="getSortClass('name')"></div></th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat-start="property in filteredProps | filter:search | orderBy:sortColumn:reverseSort | startFrom:currentPage*pageSize | limitTo:pageSize track by property.id">
            <td>
                <span data-ng-show="{{property.numOfBuildings}}">
                    <image data-ng-click="getChildren(property,filteredProps.indexOf(property))" data-ng-src="carrotImage"></image>
                </span>
            </td>
            <td>
                {{property.name}}
            </td>
            <td>
                {{property.description}}
            </td>
        </tr>
        <tr data-ng-repeat-end data-ng-show="property.expanded">
            <table>
                <tbody>
                <tr data-ng-repeat="child in property.children | startFrom:property.childrenCurrentPage*property.childrenPageSize | limitTo:property.childrenPageSize track by child.id">
                    <td></td>
                    <td>
                        {{child.name}}
                    </td>
                    <td>
                        {{child.description}}
                    </td>
                </tr>
                </tbody>
                <div data-ng-show="property.childrenNumOfPages > 1">
                    <button data-ng-disabled="property.childrenCurrentPage == 0" data-ng-click="property.childrenCurrentPage=0">First</button>
                    <button data-ng-disabled="property.childrenCurrentPage == 0" data-ng-click="property.childrenCurrentPage=childrenCurrentPage-1">Previous</button>
                    Page {{property.childrenCurrentPage+1}} of {{property.childrenNumOfPages}}
                    <button data-ng-disabled="property.childrenCurrentPage >= property.children.length/property.childrenPageSize - 1" data-ng-click="property.childrenCurrentPage=property.childrenCurrentPage+1">Next</button>
                    <button data-ng-disabled="property.childrenCurrentPage >= property.children.length/property.childrenPageSize - 1" data-ng-click="property.childrenCurrentPage=property.childrenNumOfPages-1">Last</button>
                </div>
            </table>
        </tr>
    </tbody>
</table>
<div class="centered" data-ng-show="numberOfPages > 1">
    <button data-ng-disabled="currentPage == 0" data-ng-click="currentPage=0">First</button>
    <button data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1">Previous</button>
    Page {{currentPage+1}} of {{numberOfPages}}
    <button data-ng-disabled="currentPage >= filteredProps.length/pageSize - 1" data-ng-click="currentPage=currentPage+1">Next</button>
    <button data-ng-disabled="currentPage >= filteredProps.length/pageSize - 1" data-ng-click="currentPage=numberOfPages-1">Last</button>
</div>

js文件看起来像这样（子项属性将按需加载 - 当用户点击一行的carrotImage时）

$scope.getChildren = function(property, index){
        property.expanded = !property.expanded;
        if($scope.filteredProps[index].children){
            return;
        }
        var parentProId = property.id;
        $http({
            method: 'GET',
            url: /children/ + parentProId
        })
            .then(function (response) {
                var children = response.data;
                $scope.filteredProps[index].children = children;
                $scope.filteredProps[index].childrenCurrentPage = 0;
                $scope.filteredProps[index].childrenPageSize = 2;
                $scope.filteredProps[index].childrenNumOfPages = Math.ceil($scope.filteredProps[index].children.length/$scope.filteredProps[index].childrenPageSize);

            });
    };

父级属性和分页栏的分页工作正常显示在表的末尾。但它不显示子属性的嵌套表。我将不胜感激任何帮助。