我使用AngularJs,我有以下代码:
<tr ng-repeat=" a in table>
<td>{{a.ClientID}}</td>
<td>{{a.SiteName}}</td>
<td>{{a.Group}}</td>
</tr>
此表的结果为:
ClientID SiteName Group
========= ========== =======
1 Ikaria Group
2 Ikaria Group
3 Limnos Null
4 Pythion Group
我想创建一个过滤器,当警报组=组和站点名称多次给我以下结果:
ClientID SiteName Group
========= ========== =======
1 (+) Ikaria Group
3 Limnos Null
4 Pythion Group
当我单击客户端 ID (+( 时,我想查看客户端 ID = 2 并行
你有什么想法吗?谢谢!!
您可以使用自定义的唯一过滤器轻松访问它。
这是工作代码
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
var app = angular.module("testApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.showDupes = function(site){
if($scope.siteName == site){
$scope.siteName = undefined;
}
else{
$scope.siteName = site;
}
};
$scope.filter='SiteName';
$scope.getCount = function(i) {
var iCount = iCount || 0;
for (var j = 0; j < $scope.tableData.length; j++) {
if ($scope.tableData[j].SiteName == i) {
iCount++;
}
}
return iCount;
}
$scope.tableData = [{"ClientID":1,"SiteName":"Ikaria","Group":"Group"},{"ClientID":2,"SiteName":"Ikaria","Group":"Group"},{"ClientID":3,"SiteName":"Limnos","Group":"Null"},{"ClientID":4,"SiteName":"Limnos","Group":"Null"},{"ClientID":5,"SiteName":"Limnos","Group":"Null"},{"ClientID":6,"SiteName":"Limnos","Group":"Null"},{"ClientID":7,"SiteName":"Limnos","Group":"Null"},{"ClientID":8,"SiteName":"Pythion","Group":"Group"}];
}]);
app.filter('unique', function() {
return function(items, filterOn, dupe) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {},
newItems = [];
var extractValueToCompare = function(item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return item[filterOn];
} else {
return item;
}
};
angular.forEach(items, function(item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (newItems[i][filterOn] != dupe && angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
item.isDuplicate = isDuplicate;
newItems.push(item);
});
items = newItems;
}
return items;
};
});
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<table class="table">
<tr ng-repeat="a in tableData | unique:filter:siteName as filteredTable" ng-hide="a.isDuplicate">
<td>{{a.ClientID}}</td>
<td>
{{a.SiteName}}
<button ng-show="getCount(a.SiteName)> 1 && a.SiteName != siteName" ng-click="showDupes(a.SiteName)">+ {{getCount(a.SiteName)-1}}</button>
</td>
<td>{{a.Group}}</td>
</tr>
</table>
<button ng-click="showDupes(undefined)">Reset</button>
</div>
</body>
</html>
angular.module('app', []).controller('ctrl', function($scope){
$scope.data = [
{ClientID:1, SiteName: 'Ikaria', Group: 'Group'},
{ClientID:2, SiteName: 'Ikaria', Group: 'Group'},
{ClientID:3, SiteName: 'Ikaria', Group: 'Group'},
{ClientID:4, SiteName: 'Limnos', Group: 'Null'},
{ClientID:5, SiteName: 'Pythion', Group: 'Group'},
{ClientID:6, SiteName: 'Pythion', Group: 'Group'},
{ClientID:7, SiteName: 'Test', Group: 'Null'}
];
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app='app' ng-controller='ctrl'>
<thead>
<tr>
<td>ClientID</td>
<td>SiteName</td>
<td>Group</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in (data | orderBy: "Group") | orderBy: "SiteName"' ng-if='$first || item.SiteName != data[$index-1].SiteName || item.Group != data[$index-1].Group || this[item.SiteName + item.Group]'>
<td>
{{item.ClientID}}
<a href='#' type='button' ng-if='((data | filter: {SiteName : item.SiteName}) | filter: {Group : item.Group}).length > 1 && !this[item.SiteName + item.Group]' ng-click='$parent.$parent.$parent[item.SiteName + item.Group]=true'>(+)</a>
</td>
<td>{{item.SiteName}}</td>
<td>{{item.Group}}</td>
</tr>
<tbody>
</table>