Question

我在angularjs中创建了一个表。现在我尝试根据标题为“source”的列值对表行进行分组。

为此，我正在使用groupBy过滤器。它没有给出任何错误。但它现在显示空行。有人能告诉我哪里出错了吗？

以下是我的代码：

 <table>
    <thead>
        <tr>
           <th>Metric</th>
           <th>Source</th>
           <th class="value">Value</th>
           <th></th>
        </tr>
        </thead>
        <tr ng-repeat="metric in metrics | filter:query | orderBy:orderProp | groupBy:'info.source'>
            <td class="metric">{{metric.name}}</td>
            <td class="source">{{metric.info.source}}</td>
            <td class="value">{{metric.info.value}}</td>
       </tr>
    </table>

我正在粘贴我的Json数据样本，以便让您了解我的表数据：

[{
  "name": "kafka.health",
  "info": {
    "source": "kafka",
    "value": "OK",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "kafka.bringo.health",
  "info": {
    "source": "kafka",
    "value": "Error",
    "timestamp": "1459438855068",
    "causes": ""
  }
}]

Answer 1

我自己找到了解决问题的方法。在表中使用“groupBy”过滤器的正确方法如下：

var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
  $scope.metrics =  [{
  "name": "kafka.health",
  "info": {
    "source": "kafka",
    "value": "OK",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "kafka.bringo.health",
  "info": {
    "source": "kafka",
    "value": "Error",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "dm.bingo.health",
  "info": {
	"source": "deployment-manager",
	"value": "Error",
	"timestamp": "1459438855068",
	"causes": ""
  }
},
{
  "name": "dm.different.health",
  "info": {
	"source": "deployment-manager",
	"value": "Warn",
	"timestamp": "84834883483",
	"causes": ""
  }
},
{
  "name": "kadmfka.bringo.health",
  "info": {
	"source": "deployment-manager",
	"value": "Error",
	"timestamp": "1459438855068",
	"causes": ""
}
}];
});

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
    <style>
	table{
	width: 100%;
	border: 1px solid black;
	border-collapse: collapse;
	}
	table>thead>tr>th, table>tbody>tr>td{
	border: 1px solid black;
	}
</style>

</head>    
<body ng-app="myApp">
        <div>
            <div data-ng-controller="SimpleController">      
             <table>
		<thead>
			<tr>
			   <th>Metric</th>
			   <th>Source</th>
			   <th class="value">Value</th>
			   <th></th>
			</tr>
		</thead>
		<tbody>
		<tr ng-repeat="metric in metrics | groupBy:'info.source' ">
				<td class="metric">
					<table>
					<tr ng-repeat="item in metric">
					<td>{{item.name}}</td>
					</tr>
					</table>
				</td>
				<td class="source">{{metric[0].info.source}}</td>
				<td class="value">
				<table>
					<tr ng-repeat="item in metric">
					<td>{{item.info.value}}</td>
					</tr>
			   </table>
			   </td>
		</tr>
		</tbody>
    </table>
            </div>
        </div>
            </div>
        </div>
    </body>

    </html>

Answer 2

使用

 <tr ng-repeat="(key, value) in metrics | groupBy:'info.source' ">

<强>样本

＆＃13;

var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
  $scope.metrics =  [{
  "name": "kafka.health",
  "info": {
    "source": "kafka",
    "value": "OK",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "kafka.bringo.health",
  "info": {
    "source": "kafka",
    "value": "Error",
    "timestamp": "1459438855068",
    "causes": ""
  }
}];
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
<body ng-app="myApp">
    <div>
        <div data-ng-controller="SimpleController">      
         <table>
    <thead>
        <tr>
           <th>Metric</th>
           <th>Source</th>
           <th class="value">Value</th>
           <th></th>
        </tr>
        </thead>
        <tr ng-repeat="(key, value) in metrics | groupBy:'info.source' ">
            <td class="metric">{{key}}</td>
            <td class="source">{{key}}</td>
            <td class="value">{{key}}</td>
       </tr>
    </table>
        </div>
    </div>
        </div>
    </div>
</body>

</html>

＆＃13;

GroupBy过滤器在angularJs中不起作用

2 个答案: