Question

我想知道当数据跨多个表分布时如何正确排序表数据。我有一些基于应用所属国家/地区的表格中显示的应用数据，即每个国家/地区都有自己的应用数据表。我可以使用orderBy单击表格标题（应用程序属性）对表格数据进行排序，但单击其中一个国家/地区表格的标题会对所有国家/地区表格进行排序。我想知道如何隔离范围，以便单击一个国家/地区的应用程序数据表的表标题只会更改其应用程序数据的顺序，而不会更改其他国家/地区的应用程序数据表。我尝试将countryId属性添加到应用程序数据，然后根据当前单击的国家/地区表进行过滤，但这只会导致其他国家/地区表为空。什么是隔离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);
  }

Answer 1

通过将orderBy过滤器添加到控制器并通过单击国家/地区表进行调用来修复，请参阅上面的编辑。

Angular orderBy和范围

1 个答案: