Question

我正在尝试仅选择带有过滤数据的ng表中的行。使用以下代码过滤表行，但是甚至选择了未显示的行：

控制器：

<script type="text/ng-template" id="checkbox.html">
    <input type="checkbox" ng-model="checkboxes.checked" class="select-all" value="">
</script>
<table class="table" ng-table="tableParams" show-filter="true">
    <tr ng-repeat="item in $data track by $index">
        <td header="'checkbox.html'">
            <input type="checkbox" ng-model="checkboxes.items[item.id]">
        </td>
        <td data-title="'Name'" filter="{'name': 'text'}">
            {{item.name}}
        </td>
        <td data-title="'Gender'" filter="{'gender': 'text'}">
            {{item.gender}}
        </td>
    </tr>
</table>

HTML：

<?php
error_reporting(E_ALL ^ E_DEPRECATED);

$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("slcommunitydb") or die(mysql_error());
?>

<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>

<!-------- Customizable Css for Map  ----------------------------->
    <style type="text/css">
        body { font: normal 10pt Helvetica, Arial; }
        #map { width: 500px; height: 300px; border: 0px; padding: 0px; }
    </style>

    <!---------------- Java Scripts for Map  ----------------->
    <script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxx&sensor=false" 
    type="text/javascript"></script>

    <!------------- Java Scripts for Map  ------------------->
    <script type="text/javascript">

    //--------------------- Sample code written by vIr ------------
    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
               new google.maps.Size(32, 32), new google.maps.Point(0, 0),
               new google.maps.Point(16, 32));
                    var center = null;
                    var map = null;
                    var currentPopup;
                    var bounds = new google.maps.LatLngBounds();
                    function addMarker(lat, lng, info) {
                        var pt = new google.maps.LatLng(lat, lng);
                        bounds.extend(pt);
                        var marker = new google.maps.Marker({
                            position: pt,
                            icon: icon,
                            map: map
                        });
                        var popup = new google.maps.InfoWindow({
                            content: info,
                            maxWidth: 300
                        });
                        google.maps.event.addListener(marker, "click", function() {
                            if (currentPopup != null) {
                                currentPopup.close();
                                currentPopup = null;
                            }
                            popup.open(map, marker);
                            currentPopup = popup;
                        });
                        google.maps.event.addListener(popup, "closeclick", function() {
                            map.panTo(center);
                            currentPopup = null;
                        });
                    }           
                    function initMap() {
                        map = new google.maps.Map(document.getElementById("map"), {

                            center: new google.maps.LatLng(0, 0),
                            zoom: 14,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControl: true,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                            },
                            navigationControl: true,
                            navigationControlOptions: {
                                style: google.maps.NavigationControlStyle.ZOOM_PAN
                            }
                        });
     <?php

     $query = mysql_query("SELECT * FROM salesmapmarkers")or die(mysql_error());
    while($row = mysql_fetch_array($query))
    {
      $name = $row['name'];
      $lat = $row['lat'];
      $lon = $row['lon'];
      $desc = $row['desc'];

   echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
   }
  ?>
   center = bounds.getCenter();
   map.fitBounds(bounds);

   }
   </script>

  </head>
    <body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">
       <div id="map"></div>
    </body>
 </html>

当通过名称或性别过滤表格时，表格将使用过滤后的数据进行重新呈现。在筛选表时单击“全选”复选框时，将选择筛选的行。不幸的是，当您清除过滤器时，也会选择先前过滤掉的行。选择所有已过滤的行然后触发应该获取所选项的操作时也是如此。（为操作选择了所有ID。）

我怎样才能选择过滤的行？谢谢。

Answer 1

好的，我开始工作了。我刚刚向tableData添加了一个$scope对象，因此我可以将过滤后的数据存储在那里。这就是我用来检查所选项目的内容。

let sampleData = [{id: 1, name: 'John Doe', gender: 'Male'},
    {id: 2, name: 'Jane Doe', gender: 'Female'},
    {id: 3, name: 'Mary Jane', gender: 'Female'},
    {id: 4, name: 'Mary Poppins', gender: 'Female'}];

$scope.tableData = {
    filteredData: [],
    checkboxes: {
        checked: false,
        items: {}
    }
};

$scope.tableParams = new NgTableParams({
    page: 1,
    count: 10
}, {
    total: data.length;
    getData: ($defer, params) => {
        let filter = params.filter();
        let count = params.count();
        let page = params.page();
        let filteredData = filter ? $filter('filter')(data, filter) : data;

        params.total(filteredData.length);
        $scope.tableData.filteredData = filteredData;

        $defer.resolve(filteredData.slice((page - 1) * count, page * count));
    }
});

$scope.$watch(() => {
    return $scope.tableData.checkboxes.checked;
}, (value) => {
    $scope.tableData.filteredData.map((item) => {
        $scope.tableData.checkboxes.items[item].id = value;
    });
});

$scope.$watch(() => {
    return $scope.tableData.checkboxes.items;
}, () => {
    let checked = 0;
    let unchecked = 0;
    let data = $scope.tableData.filteredData;
    let total = data.length;
    let checkboxes = $scope.tableData.checkboxes;

    data.map((item) => {
        if (checkboxes.items[item].id) {
            checked++;
        } else {
            unchecked++;
        }
    });

    if (unchecked === 0 || checked === 0) {
        checkboxes.checked = checked === total;
    }

    angular.element($element[0].getElementsByClassName('select-all')).prop('indeterminate', (checked != 0 && unchecked != 0));
});

不确定这是否是最好的方法。此外，当您过滤＆gt;时，这不会将select all复选框的状态更改为indeterminate。全选＆gt;清除过滤器。

Answer 2

在你的第二只手表中，更改为返回$ scope.tableData.filteredData;可以解决你的问题

ngTable选择所有过滤的数据

2 个答案: