angularjs自定义过滤器，用于检查数据数组中的值 [英] angularjs custom filter to check for values inside a data array

问题描述

我有两个过滤器，根据数据中的队列密钥过滤数据。
这是我的代码：

I have two filters which filter the data according to the queue key in the data. Here is my code :

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456'
    },
  ];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item, function(term, key) {
          if (term != null && !isFound) {
            term = term.toString();
            term = term.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();
              if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queue}}</td>

      </tr>
    </table>
  </div>
</div>

过滤器的工作原理完美。

the filters work perfectly.

但如果我有这样的数据，其中队列在一个数组中：

But if I have the data like this where the queue is inside an array:

$scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'queue' :'456'}]},
];

注意：在queuerr中可以有多个对象，比如
this： [{queue：'111'}，{queue：'278'}]

如何更改当前代码，以便控件进入queuerr数组并匹配队列并相应地返回结果？

How do I alter my current code so that the control goes inside the queuerr array and match the queue and return the result accordingly?

推荐答案

你有一些条件可以在 Angular.forEach 中进行更改，看看解决方案。

you have some conditions to change in the Angular.forEach take a look at the solution.

ServerB出现在两个搜索中

ServerB shows up in both searchs

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456',
      queuearr: [{
        queue: '456'
      }, {
        queue: '111'
      }]
    },
  ];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item, function(term, key) {
          // change here to check for arrays
          if (term || Array.isArray(term) && !isFound) {
            // use JSON.stringify here
            term = JSON.stringify(term);
            term = term.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();

              if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queue}}</td>

      </tr>
    </table>
  </div>
</div>

这篇关于angularjs自定义过滤器，用于检查数据数组中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！