我们正在使用带有spring的后端的Angular Js应用程序。我需要从表格中应用过滤器获得的过滤项目列表。
<tr class="ng-scope" dir-paginate="art in filteredItems=(vm.arts|filter:search | orderBy:sortKey:reverse) | itemsPerPage: 10" ng-include="getTemplate(art)"></tr>
但 filteredItems 未定义/未在控制器中获取值。使用ng-repeat代替dir-paginate时，相同的filteredItems正在运行。
我需要在桌面上分页，所以我必须在tr中使用dir-paginate。 如何使用dir-paginate获取filteredItems。
这是完整的html页面：
<div style="min-height:650px;">
<ul class="nav nav-tabs">
<li style="margin-right: -1px;" class="active" ng-bind-html-unsafe="All">
<a class="tabbar" data-toggle="tab"> Artifacts </a>
</li>
<a style="float: right;font-size: 20px;margin-right: 12px;margin-top: 5px;" ng-click="vm.exportArtifactsToCSV()" class="fa fa-file-excel-o"></a>
</ul>
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-11 col-xs-1" style="padding-left: 5%;margin-top: 1%;margin-bottom: 1%;">
<span style="color: #669933;"><i class="fa fa-plus-circle" ui-sref="art.new"
aria-hidden="true" style="font-size: 20px;"></i></span>
</div>
</div>
</div>
<div class="tab-content">
<div id="Artifacts" class="tab-pane fade in active">
<div class="table-responsive">
<table class="jh-table table table-striped" style="border: 1px solid grey;">
<thead>
<tr>
<th style="border-bottom: 1px solid white;border-right: 1px solid grey;" ng-show="!(vm.roles.length == 1 && vm.roles.indexOf('ROLE_READONLY') > -1)"></th>
<th style="border-bottom: 1px solid white;border-right: 1px solid grey;"></th>
<th style="border-bottom: 1px solid white;border-right: 1px solid grey;"></th>
<th style="border-bottom: 1px solid white;border-right: 1px solid grey;"></th>
<th style="border-bottom: 1px solid white;border-right: 1px solid grey;"></th>
<th style="border-bottom: 1px solid white;border-right: 1px solid grey;"></th>
<th style="border-bottom: 1px solid grey;border-right: 1px solid white;"></th>
<th style="border-bottom: 1px solid grey;border-right: 1px solid white;"></th>
</tr>
<tr>
<th style="border-bottom: 1px solid grey;border-right: 1px solid grey;" ng-show="!(vm.roles.length == 1 && vm.roles.indexOf('ROLE_READONLY') > -1)"></th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a ng-click="sort('artName')"
style="cursor: pointer"
class="ng-isolate-scope">Artifact Name<span
class="glyphicon sort-icon" ng-show="sortKey=='artName'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a
ng-click="sort('bucket.bucketShortName')"
style="cursor: pointer"
class="ng-isolate-scope"> Bucket <span
class="glyphicon sort-icon" ng-show="sortKey=='bucket.bucketShortName'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a ng-click="sort('artMedium')"
style="cursor: pointer"
class="ng-isolate-scope">Medium<span
class="glyphicon sort-icon" ng-show="sortKey=='artMedium'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a
ng-click="sort('artSource')"
style="cursor: pointer"
class="ng-isolate-scope">Source<span
class="glyphicon sort-icon" ng-show="sortKey=='artSource'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a
ng-click="sort('application.id')"
style="cursor: pointer"
class="ng-isolate-scope">User Interface App ID<span
class="glyphicon sort-icon" ng-show="sortKey=='application.id'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a
ng-click="sort('artDocumentumCabinet')"
style="cursor: pointer"
class="ng-isolate-scope">Cabinet<span
class="glyphicon sort-icon" ng-show="sortKey=='artDocumentumCabinet'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
<th style="text-align: center;border-bottom: 1px solid grey;border-right: 1px solid grey;" class="ng-scope"><a
ng-click="sort('artDocumentumType')"
style="cursor: pointer"
class="ng-isolate-scope">Document
Type<span
class="glyphicon sort-icon" ng-show="sortKey=='artDocumentumType'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right: 1px solid grey;" ng-show="!(vm.roles.length == 1 && vm.roles.indexOf('ROLE_READONLY') > -1)"></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.artName" placeholder="Search"/><a ng-if="search.artName.length" ng-click="search.artName=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.bucket.bucketShortName" placeholder="Search"/><a ng-if="search.bucket.bucketShortName.length" ng-click="search.bucket.bucketShortName=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.artMedium" placeholder="Search"/><a ng-if="search.artMedium.length" ng-click="search.artMedium=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.artSource" placeholder="Search"/><a ng-if="search.artSource.length" ng-click="search.artSource=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.application.id" placeholder="Search"/><a ng-if="search.application.id.length" ng-click="search.application.id=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.artDocumentumCabinet" placeholder="Search"/><a ng-if="search.artDocumentumCabinet.length" ng-click="search.artDocumentumCabinet=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
<td style="border-right: 1px solid grey;"><input type="text" delete-if-empty style="display:block;padding-right: 5%;" ng-model="search.artDocumentumType" placeholder="Search"/><a ng-if="search.artDocumentumType.length" ng-click="search.artDocumentumType=''"><span class="icon clearFilter"><i class="fa fa-close" aria-hidden="true"></i></span></a></td>
</tr>
<tr ng-include="getTemplate(art)" dir-paginate="art in (filteredItems=(vm.arts|filter:search|orderBy:sortKey:reverse)|itemsPerPage: 10)">
</tr> </tbody>
</table>
</div>
<div class="text-center">
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)"
template-url="/templates/dirPagination.tpl.html"></dir-pagination-controls>
<div class="text-center">
<pre ng-show="showTotalResults" class="ng-binding">Total Results:{{(vm.arts|filter:search).length}}</pre>
</div>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="display">
<td style="border-right: 1px solid grey;" ng-show="!(vm.roles.length == 1 && vm.roles.indexOf('ROLE_READONLY') > -1)" class="text-right">
<button type="button" class="btn btn-primary" ng-click="editArtifact(art)">Edit</button>
</td>
<td style="border-right: 1px solid grey;">{{art.artName}}</td>
<td style="border-right: 1px solid grey;">{{art.bucket.bucketShortName}}</td>
<td style="border-right: 1px solid grey;">{{art.artMedium}}</td>
<td style="border-right: 1px solid grey;">{{art.artSource}}</td>
<td style="border-right: 1px solid grey;">{{art.application.id}}</td>
<td style="border-right: 1px solid grey;">{{art.artDocumentumCabinet}}</td>
<td style="border-right: 1px solid grey;">{{art.artDocumentumType}}</td>
</script>
<script type="text/ng-template" id="edit">
<td style="border-right: 1px solid grey;" ng-show="!(vm.roles.length == 1 && vm.roles.indexOf('ROLE_READONLY') > -1)">
<span style="display: inline-flex;">
<button class="btn btn-primary" ng-click="saveArtifact($index)">Save</button>
<button class="btn btn-default" ng-click="reset()">Cancel</button>
</span>
</td>
<td style="border-right: 1px solid grey;"><input type="text" ng-model="vm.selected.artName" ng-style="vm.selected.artName === '' && {'border-color': 'red'}"/></td>
<td style="border-right: 1px solid grey;">
<select class="form-control" id="field_bucket" name="bucket" ng-model="vm.selected.bucket"
ng-options="buckets as buckets.bucketShortName for buckets in vm.buckets track by buckets.id">
<option value=""></option>
</select>
</td>
<td style="border-right: 1px solid grey;">
<select class="form-control" id="field_artMedium" name="artMedium" ng-model="vm.selected.artMedium">
<option value="E">E</option>
<option value="HC/E">HC/E</option>
<option value="HC">HC</option>
<option value="N/A">N/A</option>
<option value="WIP">WIP</option>
</select>
</td>
<td style="border-right: 1px solid grey;">
<select required class="form-control" id="field_artSource" ng-style="vm.selected.artSource === '' && {'border-color': 'red'}"
name="artSource" ng-model="vm.selected.artSource">
<option value="Documentum">Documentum</option>
<option value="Filenet">Filenet</option>
<option value="FileCabinet">File Cabinet</option>
<option value="SharedDrive">Shared Drive</option>
<option value="Sharepoint">Sharepoint</option>
<option value="Mobius">Mobius</option>
<option value="Other">Other</option>
</select>
<!--<input type="text" ng-model="vm.selected.artSource" ng-style="vm.selected.artSource === '' && {'border-color': 'red'}"/>--></td>
<td style="border-right: 1px solid grey;">
<select class="form-control" id="field_application" name="application" ng-model="vm.selected.application"
ng-options="application as application.id for application in vm.applications track by application.id">
<option value=""></option>
</select>
</td>
<td style="border-right: 1px solid grey;"><input type="text" ng-model="vm.selected.artDocumentumCabinet"/></td>
<td style="border-right: 1px solid grey;"><input type="text" ng-model="vm.selected.artDocumentumType"/></td>
</script>
js中的getTemplate：
$scope.getTemplate = function(art) {
if (art !== undefined && art.id === vm.selected.id)
return 'edit';
else return 'display';
};
如何使用分页过滤项目。我试过在span中添加ng-include但没有工作，不显示数据。也没用div。
我如何获得filteredItems？