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

问题描述

我有两个过滤器，它们根据数据中的队列键过滤数据.这是我的代码:

var app = angular.module('app', []);app.controller('mainController', function($scope) {//数据对象$scope.servers = [{名称:'服务器A'，队列:'111'},{名称:'Server7',队列:'111'},{名称:'服务器2'，队列:'456'},{名称:'服务器B'，队列:'456'},];//过滤默认值$scope.Filter = new Object();$scope.Filter.queue = {'PAV': '111','UAT':'456'};});//全局搜索过滤器app.filter('searchFilter', function($filter) {返回函数(项目，搜索过滤器){var isSearchFilterEmpty = true;angular.forEach(搜索过滤器，函数(搜索字符串){if (searchstring != null && searchstring != "") {isSearchFilterEmpty = false;}});如果 (!isSearchFilterEmpty) {var 结果 = [];angular.forEach(项目，功能(项目){var isFound = false;angular.forEach(item, function(term, key) {if (term != null && !isFound) {term = term.toString();term = term.toLowerCase();angular.forEach(搜索过滤器，函数(搜索字符串){searchstring = searchstring.toLowerCase();if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {结果.推(项目)；isFound = true;}});}});});返回结果；} 别的 {退换货品;}}});

<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>显示 111</label><input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"'/>&nbsp;<label>显示 456</label><input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"'/>&nbsp;<小时/><table width="100%" cellpadding="5"><tr><th>姓名</th><th>队列</th></tr><tr ng-repeat="服务器中的服务器 | searchFilter:Filter.queue"><td>{{server.name}}</td><td>{{server.queue}}</td></tr>

过滤器工作完美.

但是如果我有这样的数据，其中队列位于数组中:

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

<块引用>

注意:队列中可以有多个对象，例如this:[{queue :'111'},{queue :'278'}]

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

解决方案

你在Angular.forEach中有一些条件需要改变，看看解决方案.

ServerB 出现在两个搜索中

var app = angular.module('app', []);app.controller('mainController', function($scope) {//数据对象$scope.servers = [{名称:'服务器A'，队列:'111'},{名称:'Server7',队列:'111'},{名称:'服务器2'，队列:'456'},{名称:'服务器B'，队列:'456'，排队者:[{队列:'456'}, {队列:'111'}]},];//过滤默认值$scope.Filter = new Object();$scope.Filter.queue = {'PAV': '111','UAT':'456'};});//全局搜索过滤器app.filter('searchFilter', function($filter) {返回函数(项目，搜索过滤器){var isSearchFilterEmpty = true;angular.forEach(搜索过滤器，函数(搜索字符串){if (searchstring != null && searchstring != "") {isSearchFilterEmpty = false;}});如果 (!isSearchFilterEmpty) {var 结果 = [];angular.forEach(项目，功能(项目){var isFound = false;angular.forEach(item, function(term, key) {//在这里更改以检查数组if (term || Array.isArray(term) && !isFound) {//这里使用 JSON.stringifyterm = JSON.stringify(term);term = term.toLowerCase();angular.forEach(搜索过滤器，函数(搜索字符串){searchstring = searchstring.toLowerCase();if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {结果.推(项目)；isFound = true;}});}});});返回结果；} 别的 {退换货品;}}});

<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>显示 111</label><input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"'/>&nbsp;<label>显示 456</label><input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"'/>&nbsp;<小时/><table width="100%" cellpadding="5"><tr><th>姓名</th><th>队列</th></tr><tr ng-repeat="服务器中的服务器 | searchFilter:Filter.queue"><td>{{server.name}}</td><td>{{server.queue}}</td></tr>

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'}]},
];

note : there can be multiple objects in the queuerr like this:[{queue :'111'},{queue :'278'}]

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?

解决方案

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

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屋！