angularjs自定义过滤器检查数据数组中的值答案

【问题标题】：angularjs custom filter to check for values inside a data arrayangularjs自定义过滤器检查数据数组中的值
【发布时间】：2019-05-11 01:15:05
【问题描述】：

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

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>

过滤器完美运行。

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

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

注意：queuerr 中可以有多个对象，例如这个：[{queue :'111'},{queue :'278'}]

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

【问题讨论】：

searchfilter 的可能值是多少？如果您包含您想要对数据类型执行的操作而不是仅提供代码并让我们从您的代码中对您正在尝试执行的操作进行逆向工程，那么可能更容易回答这个问题。
如果我理解正确你想看看 $scope.Filter.queue 的值是否在 $scope.servers 队列中并获取相应的服务器名称？
@hmr 如果你做 console.log(searchfilter) 输出是 { "PAV": "111", "UAT": "456" }
键PAV和UAT有什么意义吗？您能否用您想要做什么来更新问题？
@AlexG 我想看看 $scope.Filter.queue 的值是否在 $scope.servers queuearr 中

标签： javascript angularjs html angularjs-filter

【解决方案1】：

你有一些条件要改在Angular.forEach看看解决办法。

ServerB 出现在两个搜索中

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>

【讨论】：

这是完美的。这将永远有效。必须向你学习 JSON.stringify 有多么有用。非常感谢:)
请看我的问题here

【解决方案2】：

我认为你可以这样做。由于您的代码过于复杂且对齐不佳，因此不清楚您究竟想要做什么。

app.filter('searchFilter',function($filter) {
  return function(items, searchfilter) {
      const terms = Object.values(searchfilter).map(
          (val)=>val.toLowerCase(),
      );
      return items.filter((item) =>
          item.queuearr.some((q) => terms.includes(q.queue.toLowerCase())),
      );
  };
}

【讨论】：

感谢您帮助我

【解决方案3】：

如果你想用队列的值过滤 $scope.servers 你可以试试这个。希望这会有所帮助。

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

const itemsToCheck = { 'PAV':'111', 'UAT':'426' };

const filter = (arr, itemsToCheck) => arr.filter((item) => {

    for (let v of Object.values(itemsToCheck)) {

        const found = item.queuearr.find(({ queue }) => queue === v);

        if (found) return true;
    }

    return false;
});

console.log(filter(servers, itemsToCheck));

【讨论】：

感谢您帮助我

【解决方案4】：

我已根据您给定的数组修改了您的 sn-p。它可以根据您的需要正常工作。

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'
    },
  ];
  */
  $scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'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.queuearr, function(term, key) {
          if (term.queue != null && !isFound) {
            term.queue = term.queue.toString();
            term.queue = term.queue.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();
              if (searchstring != "" && 
              term.queue.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.queuearr[0].queue}}</td>

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

【讨论】：

检查我的答案。感谢您为我提供的帮助。
是的，但我没有为每个添加另一个。它也可以使用相同的代码库。正确检查我的解决方案。
是的，将实施您的解决方案 :)
此方案不检查数组中的多个值
阅读问题“注意：queuerr 中可以有多个对象，如下所示：[{queue :'111'},{queue :'278'}]”

【解决方案5】：

当queue 在数组中时，我通过添加另一个forEach 循环来遍历queuearr 解决了这个问题：

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

app.controller('mainController', function($scope) {
    // Data object
   $scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'},{'queue' :'456'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'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) {
//console.log(items);
             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.queuearr, function(z) {
//console.log(item.queue);     
		    angular.forEach(z, function(term,key) {
//console.log(z);
//console.log(item.queue);                         
                         if(term != null &&  !isFound){
                             term = term.toString();
                             term = term.toLowerCase();
                                angular.forEach(searchfilter, function(searchstring) {  
//console.log(searchfilter);    
                                    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.4/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='""' />&nbsp;
        <label>show 456</label>
        <input  type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"'  ng-false-value='""' />&nbsp;
      
        <hr />
        <table width="100%" cellpadding="5">
            <tr>
                <th>Name</th>
               
               
            </tr>
            <tr ng-repeat="server in servers | searchFilter:Filter.queue">
                <td>{{server.name}}</td>
               
               
            </tr>
        </table>
    </div>
</div>

现在完美运行

【讨论】：