angularjs自定义过滤器，用于检查数据数组中的值

5 回答

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

  回复于 2024-05-05T06:50:25+08:00
• 1

  我想你可以这样做 . 目前尚不清楚您想要做什么，因为您的代码过于复杂且严重对齐 .

  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())),
        );
    };
  }
  

  回复于 2024-05-05T06:50:25+08:00
• 0

  我已根据您给定的数组修改了您的代码段 . 它可以根据您的需要正常工作 .

  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>
  

  回复于 2024-05-05T06:50:25+08:00
• 0

  如果要使用队列的值过滤$ 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));
  

  回复于 2024-05-05T06:50:25+08:00
• 1

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

  现在它完美无缺

  回复于 2024-05-05T06:50:25+08:00