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

Question

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

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

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

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