通过点击另一个数据表中的一行来过滤一个表中的数据

Filtering data in one table by clicking on a row in another datatables AngularJS

本文关键字：过滤 一个 数据 一行 另一个 数据表      更新时间：2023-09-26

我有两个AngularJS数据表显示。第一个是县，第二个是镇。我需要做的是通过点击第一个表中的一行来过滤第二个表中的数据。例如，当我单击第一个表中包含Orange County的行时，第二个表中应该只过滤该县的城镇，而不是其他城镇。如有任何建议和指点，我将不胜感激。

这是我用来显示表格的代码:

<div>
        <datatables-lazy columns="countiesColumns" options="countiesOptions" class="grid"></datatables-lazy>
</div>

$scope.countiesColumns = [
        DTColumnBuilder.newColumn('name').withTitle(localizationService.getLabel('ime')),
        DTColumnBuilder.newColumn('code').withTitle(localizationService.getLabel('kod')),
        DTColumnBuilder.newColumn(null).withTitle('Akcije').notSortable().renderWith(actionsHtml)
    ];
    $scope.countiesOptions = DTOptionsBuilder.fromFnPromise(function () { return settingsService.getCounties(); })
        .withPaginationType('full_numbers')
        .withOption('createdRow', createdRow);
    function createdRow(row) {
        $compile(angular.element(row).contents())($scope);
    }

下面是从数据库获取数据的服务:

getCounties: function () {
        var deferred = $q.defer();
        $http.get(applicationSettings.humanResourcesAPIUrl + 'settings/getCountyList')
            .success(function (response) { deferred.resolve(response); })
            .error(function (err, status) { deferred.reject(err); });
        return deferred.promise;
    }, 
    getCounty: function (id) {
        var deferred = $q.defer();
        $http.get(applicationSettings.humanResourcesAPIUrl + 'settings/getCounty?countyId=' + id)
            .success(function (response) { deferred.resolve(response); })
            .error(function (err, status) { deferred.reject(err); });
        return deferred.promise;
    },

您需要在第一个表上设置ng-click，以便它通过函数将所选城镇的值分配给变量。

。ng-click="setTown(town)" 

$scope.activeTown = "";
$scope.setTown = function(town) {
    $scope.activeTown = town;
}

然后在第二个表中，您所需要做的就是过滤这个activeTown变量。

<tr ng-repeat="place in places | filter:activeTown">

下面是一个例子http://plnkr.co/edit/os5X3ugAZOVC5v1zn0tF?p=preview

相关文章：