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

Question

I have two AngularJS DataTables displayed. First one with counties and second with towns. So, what I need to do is filter data in second table by clicking a row in first table. For example, when I click on row with Orange County in first table, in second should be filtered only towns from that county, not other ones. Any suggestions and pointers on how to do that would be highly appreciated.

This is my code for displaying tables:

<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);
    }

Here are services for getting data from database:

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;
    },

Everything is same for second datatable Towns.

Answer 1

You would need to setup an ng-click on the first table so that it assigns a value of the selected town to a variable via a function.

eg. ng-click="setTown(town)"

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

Then in the second table, all you would need is to filter on this activeTown variable.

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

Here is an example http://plnkr.co/edit/os5X3ugAZOVC5v1zn0tF?p=preview