пользовательский фильтр angularjs для проверки значений внутри массива данных - PullRequest
Новая
       29

пользовательский фильтр angularjs для проверки значений внутри массива данных

0 голосов
/ 10 декабря 2018

У меня есть два фильтра, которые фильтруют данные в соответствии с ключом очереди в данных.Вот мой код: 

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

примечание: в очереди может быть несколько объектов, например: [{queue :'111'},{queue :'278'}]

Как изменить текущий код, чтобы элемент управления попадал внутрь массива очереди и соответствовалочередь и вернуть результат соответственно?

Ответы [ 5 ]

0 голосов
/ 10 декабря 2018

у вас есть некоторые условия для изменения в Angular.forEach, посмотрите на решение.

Сервер B отображается в обоих поисках 

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>
0 голосов
/ 10 декабря 2018

Я изменил ваш фрагмент в соответствии с данным массивом.Он отлично работает в соответствии с вашими потребностями. 

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>
0 голосов
/ 10 декабря 2018

Если вы хотите отфильтровать $ 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));
0 голосов
/ 10 декабря 2018

Я решил проблему, добавив еще один цикл forEach, чтобы пройти через queuearr, когда queue находится внутри массива: 

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>

Теперь работает отлично

0 голосов
/ 10 декабря 2018

Я думаю, вы можете сделать это так.Непонятно, что именно вы хотите делать, потому что ваш код слишком сложен и плохо выровнен. 

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