Question

＆＃13;

var app = angular.module('test',[]);

app.controller('testController',function($scope){
  $scope.users = [
    { 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
    { 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
    { 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
    { 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
    { 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
    { 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
  
  ];

});

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body>
	<div ng-app='test' ng-controller="testController">
    <h3>Groups</h3>
    <input type='checkbox' ng-model="customer">Customer
    <input type='checkbox' ng-model="sales">Sales
    <input type='checkbox' ng-model="vip">VIP
    <br>
    <input type='text' ng-model="searchTerm">
    <div>
      <ul>
        <li ng-repeat="user in users | filter:searchTerm"">
          {{user.name}}
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

＆＃13;

以下是我需要按组筛选的代码...通过选中复选框我需要过滤数据集的确切值...如果我点击多个复选框我需要过滤具有该值的多个数据...

如果我没有检查任何复选框需要显示所有数据......

请任何人帮忙......

Answer 1

您可以通过创建自定义过滤器功能来执行此类操作。我不喜欢它的解决方式..我怀疑是否有更简单的可能性。

var app = angular.module('test',[]);

app.controller('testController',function($scope){
  $scope.users = [
    { 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
    { 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
    { 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
    { 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
    { 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
    { 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
  
  ];

  $scope.myfilter = function(obj) {
    var val = true;
    if($scope.customer && !obj.customer || 
       $scope.sales && !obj.sales  || 
       $scope.vip && !obj.vip
    ) {
      val = false;
    } 
     
    return val;
  }

});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body>
	<div ng-app='test' ng-controller="testController">
    <h3>Groups</h3>
    <input type='checkbox' ng-model="customer">Customer
    <input type='checkbox' ng-model="sales">Sales
    <input type='checkbox' ng-model="vip">VIP
    <br>
    <input type='text' ng-model="searchTerm">
    <div>
      <ul>
        <li ng-repeat="user in users | filter: myfilter | filter: searchTerm">
          {{user.name}}
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Answer 2

您可以使用此

创建自定义过滤器和过滤器

<div ng-app='test' ng-controller="testController">
    <h3>Groups</h3>
    <input type='checkbox' ng-model="searchCriteria.customer">Customer
    <input type='checkbox' ng-model="searchCriteria.sales">Sales
    <input type='checkbox' ng-model="searchCriteria.vip">VIP
    <br>
    <input type='text' ng-model="searchCriteria.searchText">
    <div>
        <ul>
            <li ng-repeat="user in users | searchTerm:searchCriteria">
                {{user.name}}
            </li>
        </ul>
    </div>
</div>


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

   app.filter("searchTerm", function(){
    return function(items, searchCriteria){
    var filtered = [];

    angular.forEach(items, function(item){      
        var searchText = searchCriteria.searchText;
      var searchCustomer = searchCriteria.customer;
      var searchSales = searchCriteria.sales;
      var searchVip = searchCriteria.vip;

        var matchesSearchText = searchText ? item.name.indexOf(searchText) !== -1 : true;
      var customerMatch = searchCustomer ? item.customer : true;
      var salesMatch = searchSales ? item.sales : true;
      var vipMatch = searchVip ? item.vip : true;

      if(matchesSearchText && customerMatch && salesMatch && vipMatch){
            filtered.push(item);
        }
      });

      return filtered;
      };
    });

    app.controller('testController',function($scope){
      $scope.users = [
       { 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
       { 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
       { 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
       { 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
       { 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
       { 'name':'person6', 'sales': true, 'customer': false, 'vip': true },

     ];

     $scope.searchCriteria = {
       customer: false,
       sales: false,
       vip: false,
       searchText: ''
     };

    });

基于角度的过滤系统，用于使用多个复选框的单个数据

2 个答案: