这种ng-repeat的更好方法是什么？

Question

我根据书籍类型从数据库生成侧栏。对于每种类型，我生成一个选项卡以显示该类型的书籍列表。它适用于记录较少的其他情况，但在这种情况下我会延迟几秒钟。关于如何提高性能的任何想法？

布局：

 @* Sidebar *@
    <div class="col-sm-3" ng-if="ShowSidebar" ngCloak>
        <ul class="list-group sidebar-nav-v1" id="sidebar-nav">
            @* Books *@
            <li class="list-group-item list-toggle">
                <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse0">
                    <i class="fa fa-sort-alpha-asc"> </i> Books
                </a>
                <ul id="collapse0" class="collapse1 accordion-body collapse">
                    <li ng-repeat="bookTopic in ListBookTopics" style="text-align:justify"><a href="#{{bookTopic.id}}" data-toggle="tab">{{bookTopic.topic_en}}</a></li>
                </ul>
            </li>   @* End of Books *@
            @* Series *@
            <li class="list-group-item list-toggle">
                <a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse1">
                    <i class="fa fa-sort-alpha-asc"> </i> Series (Collections)
                </a>
                <ul id="collapse1" class="collapse">
                    <li ng-repeat="seriesTopic in ListSeriesTopics" style="text-align:justify"><a href="#{{seriesTopic.id}}" data-toggle="tab">{{seriesTopic.topic_en}}</a></li>
                </ul>
            </li>   @* End of Series *@
        </ul> 
    </div>          @* End of Sidebar v2*@

@* Main Area *@
<div class="col-sm-9" ng-if="ShowMainArea" ngCloak>

    <div class="tab-v3">
        <div class="tab-content">
            @* Generate Books Tabs to list books by type *@
            <div class="tab-pane fade in" id="{{booksTopic.id}}" ng-repeat="booksTopic in ListBookTopics" ng-cloak>
                <div class="table-search-v1 panel panel-dark margin-bottom-50">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-book"></i> {{booksTopic.topic_en}} </h3>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search..." ng-model="searchParamBooksTopics">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="center" rowspan="2">Title</th>
                                    <th class="center" rowspan="2">Author</th>
                                    <th class="center" rowspan="1">Number</th>
                                    <th class="center" rowspan="1">Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="row in ListBooksInBooks | filter: { title: searchParamBooksTopics }" ng-if="row.title.length>1 && row.topics_id == booksTopic.id">
                                    <td style="text-align:justify;"> {{row.title}}</td>
                                    <td>{{row.author}}</td>
                                    <td class="center">{{row.number}}</td>
                                    <td class="center">{{row.topics_id}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>  @* End of table-responsive *@
                </div>      @* End of table-search-v1 panel panel-dark margin-bottom-50 *@
            </div>          @* End of Tab Content 1 - Books *@

        </div>              @* End of tab-content *@
    </div>                  @* End of tab-v3 *@

</div>                      @* End of col-sm-9 - Main Area *@

Angular - 使用过的列表：

$scope.ListBookTopics           = @Html.Raw( new JavaScriptSerializer().Serialize( Model.ListBookTopics ) )
$scope.ListBooksInBooks               = @Html.Raw( new JavaScriptSerializer().Serialize( Model.ListBooksInBooks ) );

导致延迟的行是这一行：

<tr ng-repeat="row in ListBooksInBooks | filter: { title: searchParamBooksTopics }" ng-if="row.title.length>1 && row.topics_id == booksTopic.id">

如何更快地循环图书清单并获取所有类型的图书？