Question

我很难通过匹配键来确定如何根据另一个范围对象（metrics＆amp;＆amp;＆dimension）过滤范围对象（row.matric＆amp;＆amp; row.dimension）。

下面的代码是我正在使用的对象的一个示例。

在ng-repeat="row in rows”部分;当且仅当其合作伙伴指标或维度的密钥tabled设置为true时，我才需要显示row.metric或row.dimention。

row.metric和row.dimension通过键key与指标和维度匹配。

例如：应显示row.metric“visits”，但不应显示“pageviews”。

这是一个Plunker（这个而不是下面的鳕鱼）不应该显示数字400和20。

http://plnkr.co/edit/t15L5y40h8enPzUkkaJw?p=preview

HTML：

<table class="table">
    <thead>
        <tr>
            <th class="dimension" ng-repeat="dimension in dimensions | filter:{tabled:true}" >{[{ dimension.name }]}</th>
            <th class="metric" ng-repeat="metric in metrics | filter:{tabled:true}" >{[{ metric.name }]}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in rows">
            <td class="dimension" ng-repeat="dimension in row.dimensions" >{[{ dimension.value }]}</td>
            <td class="metric" ng-repeat="metric in row.metrics" >{[{ metric.current }]}</td>
        </tr>
    </tbody>
</table>

物件：

metrics Example: [
    {
        name: 'Visits',
        key: 'visits',
        tabled: true
    },
    {
        name: 'Page Views',
        key: 'pageviews',
        tabled: fales
    }
]

dimension Example: [
    {
        name: 'Source',
        key:  'source'
        tabled: true
    },
    { ... }
]


row Example: {
    metrics: [
        {key: 'visits', current: '203'},
        {key: 'pageviews', current: '104'},
        {...}
    ]
    dimensions: [
        {key: 'source', value: 'google'},
        {...}
    ]
}

Answer 1

在#angularjs IRC中回答。

以下是解决问题的plunker。请注意，这可能不是最高效的，建议重构数据。

使用ng-if和范围功能

  $scope.isTabled = function(key) {
    console.log(key);
    return _.find($scope.metrics,function(o){
      return o.key == key;
    }).tabled;

http://plnkr.co/edit/tUNFx5uli4ABDQcpkUjx?p=preview

Answer 2

您只需要一个自定义过滤器，请参阅plunker

<td class="dimension" ng-repeat="dimension in row.dimensions | filter:isTabled(dimensions)">
<td class="metric" ng-repeat="metric in row.metrics| filter:isTabled(metrics)">

$scope.isTabled = function(list) {
  return function(item) {
    return list.some(function(matchingItem) {
      return item.key == matchingItem.key && matchingItem.tabled;
    });
  }
}

通过匹配另一个数组的值进行角度ng重复过滤

2 个答案: