创建多个表时智能 Table 搜索不起作用

Question

这就是我正在做的。我调用休息 api 其中 returns 以这种格式响应

"metalanguages"：{ “1”：{ "id": 1, "name": "Abkhaz" }, “2”：{ "id": 2, "name": "Afar" } }, "manufacturers"：{ “-1”：{ "id": -1, "name": "all" }, “1”：{ "id": 1, "name": "RIM" }, “2”：{ "id": 2, "name": "HP" } }

这基本上是一个String和Map的Map。我现在必须创建 n 个 table，其中 n 是原始地图的键数，在每个 table 中我必须显示数据，这将是内部地图的值（"id"： 2、 "name": "HP")

我已经让它工作了，但搜索不工作。这是我的示例代码

<div ng-repeat="(key,value) in metadataDetails">
<table  st-table="metadataCollection" st-safe-src="metadataDetails" class="table table-striped">
<thead>
   <tr class="style_tr">
   <th st-sort="name">name</th>
   <th st-sort="name">name</th>
   <th st-sort="description">description</th>
   <th st-sort="countryName">countryName</th>
   <th st-sort="carrierName">carrierName</th>
   </tr>
   <tr class="textSearchTr">
   <th colspan="4" class="textSearchTr">
   <input class="freshblue" placeholder="Enter value to search/filter" type="text" ng-model="searchParam.search" />
   </th>
   </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in getValueMap(key)" ng-show="showRow">
    <td>{{row.id}}</td>
    <td>{{row.name}}</td>
    <td>{{row.description}}</td>
    </tr>
  </tbody>
</table>
</div>

还有我的js文件

AuditMetadataService.get({}, function(data) {

        $scope.numRecord = data.length;
        $scope.metadataDetails = data;
        $scope.metadataCollection = [].concat($scope.metadataDetails);
        console.log("Return value :");
        console.log($scope.metadataDetails);
    });

$scope.getValueMap = function(key) {

        console.log(key);
        return $scope.metadataDetails[key];

    };

有人可以帮忙吗？？

Answer 1

您可以通过获取它的键并使用 Array.prototype.map 函数将您的地图 object 变成一个数组，您也必须对内部地图 object 重复此操作因为 st-sort 需要一个数组项，而不是键值。

$scope.tables = keys.map(function(key) {
    return Object.keys(data[key]).map(function(k) {
        return data[key][k];
    });
});

然后您可以使用 ng-repeat 迭代 $scope.tables 来创建所有需要的表格，现在单击列标题将对它们进行正确排序。

这里是demo.

创建多个表时智能 Table 搜索不起作用

Smart Table search not working when creating multiple tables

angularjs

smart-table