Angular orderBy 和范围
Angular orderBy and scope
我想知道当数据分布在多个 table 时如何正确排序 table 数据。我有一些应用程序数据根据应用程序所属的国家/地区显示在 table 中,即每个国家/地区都有自己的 table 应用程序数据。我可以通过单击 table 标题(应用程序属性),使用 orderBy 对 table 数据进行排序,但单击其中一个国家/地区的标题 table 会对整个国家/地区进行排序table秒。我想知道如何隔离范围,以便单击一个国家 table 应用数据的 table 标题只会更改其应用数据的顺序,而不是其他国家 tables应用程序数据。我尝试将 countryId 属性 添加到应用程序数据,然后根据当前点击的国家 table 进行过滤,但这只会导致其他国家 table 为空。隔离 orderBy 范围的正确方法是什么?
<div class="table-responsive" ng-repeat="countryReleases in regionRelease.countryReleases">
<h5><strong>{{ countryReleases.countryName }}</strong></h5>
<table id="app" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th ng-click="vm.sortCountry = countryReleases.countryId; vm.sortName = 'application.name'; vm.sortReverse = !vm.sortReverse">
<span>App Name</span>
<span ng-show="vm.sortName == 'application.name' && !vm.sortReverse" class="pull-right fa fa-caret-up"></span>
<span ng-show="vm.sortName == 'application.name' && vm.sortReverse" class="pull-right fa fa-caret-down"></span>
</th>
<th>App Prop 2</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="appReleases in countryReleases.appReleases | filter:vm.sortCountry | orderBy:vm.sortName:vm.sortReverse">
<td>
<img class="thumbnail" ng-src="{{ appReleases.application.icon }}">
...
// 编辑:
通过将当前迭代的范围传递给控制器中的 orderBy 过滤器来修复:
<th ng-click="vm.sortName = 'application.name'; vm.sortReverse = !vm.sortReverse; vm.orderByAppCountry(this, vm.sortName, vm.sortReverse)">
...
<tr ng-repeat="appReleases in countryReleases.appReleases">
...
function orderByAppCountry(scope, predicate, reverse) {
scope.countryReleases.appReleases = $filter('orderBy')(scope.countryReleases.appReleases, predicate, reverse);
}
已通过向控制器添加 orderBy 过滤器并从国家/地区 table 的点击调用来修复,请参阅上面的编辑。
我想知道当数据分布在多个 table 时如何正确排序 table 数据。我有一些应用程序数据根据应用程序所属的国家/地区显示在 table 中,即每个国家/地区都有自己的 table 应用程序数据。我可以通过单击 table 标题(应用程序属性),使用 orderBy 对 table 数据进行排序,但单击其中一个国家/地区的标题 table 会对整个国家/地区进行排序table秒。我想知道如何隔离范围,以便单击一个国家 table 应用数据的 table 标题只会更改其应用数据的顺序,而不是其他国家 tables应用程序数据。我尝试将 countryId 属性 添加到应用程序数据,然后根据当前点击的国家 table 进行过滤,但这只会导致其他国家 table 为空。隔离 orderBy 范围的正确方法是什么?
<div class="table-responsive" ng-repeat="countryReleases in regionRelease.countryReleases">
<h5><strong>{{ countryReleases.countryName }}</strong></h5>
<table id="app" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th ng-click="vm.sortCountry = countryReleases.countryId; vm.sortName = 'application.name'; vm.sortReverse = !vm.sortReverse">
<span>App Name</span>
<span ng-show="vm.sortName == 'application.name' && !vm.sortReverse" class="pull-right fa fa-caret-up"></span>
<span ng-show="vm.sortName == 'application.name' && vm.sortReverse" class="pull-right fa fa-caret-down"></span>
</th>
<th>App Prop 2</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="appReleases in countryReleases.appReleases | filter:vm.sortCountry | orderBy:vm.sortName:vm.sortReverse">
<td>
<img class="thumbnail" ng-src="{{ appReleases.application.icon }}">
...
// 编辑: 通过将当前迭代的范围传递给控制器中的 orderBy 过滤器来修复:
<th ng-click="vm.sortName = 'application.name'; vm.sortReverse = !vm.sortReverse; vm.orderByAppCountry(this, vm.sortName, vm.sortReverse)">
...
<tr ng-repeat="appReleases in countryReleases.appReleases">
...
function orderByAppCountry(scope, predicate, reverse) {
scope.countryReleases.appReleases = $filter('orderBy')(scope.countryReleases.appReleases, predicate, reverse);
}
已通过向控制器添加 orderBy 过滤器并从国家/地区 table 的点击调用来修复,请参阅上面的编辑。