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 的点击调用来修复,请参阅上面的编辑。