如果 column_name 是双倍时间，如何使用 AngularJs 过滤 table 数据？

Question

我使用 AngularJs 并且我有以下代码：

<tr ng-repeat=" a in table>
  <td>{{a.ClientID}}</td>
  <td>{{a.SiteName}}</td>
  <td>{{a.Group}}</td>
</tr>

这个table的结果是：

ClientID    SiteName    Group
=========  ==========  =======
    1       Ikaria      Group
    2       Ikaria      Group
    3       Limnos      Null
    4       Pythion     Group

我想在 AlarmGroup = Group 和 SiteName 多次给出以下结果时创建一个过滤器：

ClientID    SiteName    Group
=========  ==========  =======
    1 (+)   Ikaria      Group
    3       Limnos      Null
    4       Pythion     Group

当我点击 ClientID (+) 时，我想查看 ClientID = 2 的行

你有什么想法吗？谢谢！！

Answer 1

您可以使用自定义唯一过滤器轻松实现。

这是工作代码

<!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>

Answer 2

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>

如果 column_name 是双倍时间，如何使用 AngularJs 过滤 table 数据？

How to Filter table data with AngularJs if column_name is double time?

angularjs

angularjs-filter