javascript - 通过选择多个或单个复选框来过滤数据，而不选择它应该在 angularjs 中显示所有结果

Question

我想在 anguarjs 的代码中添加过滤器，它应该在我选择任何一个复选框或多个复选框时过滤数据，如果没有选择任何复选框，它应该显示所有结果而不过滤。 . 这是我所做的，但问题是当我选择一个或多个复选框时它只显示数据，但我希望它也应该显示数据而不过滤..

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

app.controller('MainCtrl', function($scope) {
    $scope.alljobs  =  [{
    "id": "1",
    "company_id": "1",
    "job_title": "Full Stack ngularJs Developer",
    "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis magna non arcu cursus pharetra et posuere est. Curabitur nibh neque, euismod eget felis sed, gravida cursus risus. Praesent mattis rutrum posuere. Integer eget odio mauris. Fusce luctus, ex nec lobortis vestibulum, arcu arcu suscipit magna, at gravida erat lorem sit amet est. Duis eget ante non ante blandit scelerisque vel et nunc. Nullam a nisl tincidunt, congue risus in, scelerisque ipsum. Phasellus fermentum, nibh id convallis varius, orci urna feugiat velit, in imperdiet dolor nulla non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vel quam ex. Morbi a nibh efficitur, viverra odio eget, feugiat massa. Etiam rhoncus, metus at lobortis dapibus, quam mi auctor odio, a vestibulum ante justo pellentesque urna. Donec vel ante ac lacus commodo bibendum facilisis non ex. In tortor quam, commodo vel posuere vel, iaculis in quam. Nam aliquam ligula nunc, sit amet pulvinar nibh commodo non. Aliquam erat volutpat.\n\nAliquam sit amet egestas enim, et varius nibh. Pellentesque consectetur molestie lacus, ut tempor tortor pretium sit amet. Praesent ac dignissim felis, quis elementum tortor. Cras a malesuada ipsum. Mauris vitae tristique odio. Ut id ipsum maximus, posuere neque ut, rhoncus mauris. Fusce elit tortor, mattis et scelerisque nec, vestibulum vitae risus. In quis accumsan arcu. Sed sed velit leo.\n\nVivamus vulputate lorem at posuere interdum. Vivamus fermentum vitae risus consectetur placerat. Morbi lobortis sed mauris sed eleifend. Morbi non sapien a elit semper faucibus non vitae sapien. Praesent sagittis porttitor lacus pulvinar hendrerit. Nullam a lacus mi. Sed in pulvinar diam. Vivamus id egestas nulla, vitae euismod ipsum.",
    "skills": "Web",
    "no_positions": "1",
    "job_position": "Developer",
    "gender_spec": "Male",
    "job_time": "job_time",
    "experience": "1 Year",
    "city": "Lahore",
    "status": "approve",
    "post_date": "2017-04-08 16:01:28"
  }, {
    "id": "2",
    "company_id": "1",
    "job_title": "Full Stack Php Developer",
    "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis magna non arcu cursus pharetra et posuere est. Curabitur nibh neque, euismod eget felis sed, gravida cursus risus. Praesent mattis rutrum posuere. Integer eget odio mauris. Fusce luctus, ex nec lobortis vestibulum, arcu arcu suscipit magna, at gravida erat lorem sit amet est. Duis eget ante non ante blandit scelerisque vel et nunc. Nullam a nisl tincidunt, congue risus in, scelerisque ipsum. Phasellus fermentum, nibh id convallis varius, orci urna feugiat velit, in imperdiet dolor nulla non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vel quam ex. Morbi a nibh efficitur, viverra odio eget, feugiat massa. Etiam rhoncus, metus at lobortis dapibus, quam mi auctor odio, a vestibulum ante justo pellentesque urna. Donec vel ante ac lacus commodo bibendum facilisis non ex. In tortor quam, commodo vel posuere vel, iaculis in quam. Nam aliquam ligula nunc, sit amet pulvinar nibh commodo non. Aliquam erat volutpat.\n\nAliquam sit amet egestas enim, et varius nibh. Pellentesque consectetur molestie lacus, ut tempor tortor pretium sit amet. Praesent ac dignissim felis, quis elementum tortor. Cras a malesuada ipsum. Mauris vitae tristique odio. Ut id ipsum maximus, posuere neque ut, rhoncus mauris. Fusce elit tortor, mattis et scelerisque nec, vestibulum vitae risus. In quis accumsan arcu. Sed sed velit leo.\n\nVivamus vulputate lorem at posuere interdum. Vivamus fermentum vitae risus consectetur placerat. Morbi lobortis sed mauris sed eleifend. Morbi non sapien a elit semper faucibus non vitae sapien. Praesent sagittis porttitor lacus pulvinar hendrerit. Nullam a lacus mi. Sed in pulvinar diam. Vivamus id egestas nulla, vitae euismod ipsum.",
    "skills": "Web",
    "no_positions": "3",
    "job_position": "Developer",
    "gender_spec": "Male",
    "job_time": "job_time",
    "experience": "1 Year",
    "city": "Delhi",
    "status": "approve",
    "post_date": "2017-04-08 20:24:02"
  }];
});

html代码:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="https://code.angularjs.org/1.5.6/angular.min.js" ></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <div ng-repeat="f in alljobs">
    <input type='checkbox' ng-model='f.included'> {{f.city}}
  </div>
  <ul>
    <li ng-repeat="f in alljobs | filter:{included:true}">{{f.city}}</li>
  </ul>
</body>

</html>

Answer 1

通过 filter:{included:true}，您正在过滤具有属性 included 且值为 true 的项目，并且由于您正在添加 included:true动态到alljobs，如果你想显示所有数据，你必须用included:true和这个改变你所有的数据将导致选中所有复选框。

还有另一种选择，即构建自定义过滤器来处理所有这些事情。 并转换为选中一系列城市的过滤器。

app.filter("sampleFilter", function() {
  return function(input, options) {
    if(!input) return [];
    if(!options || options.length === 0) return input;

    return input.filter(function(item) {
      for(var i = 0; i < options.length; i++) {
        if (item.city.indexOf(options[i]) > -1) {    // filter city property only, you can add more.
          return true;
        };
      };
      return false;
    });
  }
});

引用下面的例子。

var app = angular.module('plunker', []);
app.filter("sampleFilter", function() {
  return function(input, options) {
    if(!input) return [];
    if(!options || options.length === 0) return input;
    
    return input.filter(function(item) {
      for(var i = 0; i < options.length; i++) {
        if (item.city.indexOf(options[i]) > -1) {
          return true;
        };
      };
      return false;
    });
  }
});

app.controller('MainCtrl', function($scope) {
  $scope.conditions = [];
  $scope.alljobs = [{
    "id": "1",
    "company_id": "1",
    "job_title": "Full Stack ngularJs Developer",
    "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis magna non arcu cursus pharetra et posuere est. Curabitur nibh neque, euismod eget felis sed, gravida cursus risus. Praesent mattis rutrum posuere. Integer eget odio mauris. Fusce luctus, ex nec lobortis vestibulum, arcu arcu suscipit magna, at gravida erat lorem sit amet est. Duis eget ante non ante blandit scelerisque vel et nunc. Nullam a nisl tincidunt, congue risus in, scelerisque ipsum. Phasellus fermentum, nibh id convallis varius, orci urna feugiat velit, in imperdiet dolor nulla non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vel quam ex. Morbi a nibh efficitur, viverra odio eget, feugiat massa. Etiam rhoncus, metus at lobortis dapibus, quam mi auctor odio, a vestibulum ante justo pellentesque urna. Donec vel ante ac lacus commodo bibendum facilisis non ex. In tortor quam, commodo vel posuere vel, iaculis in quam. Nam aliquam ligula nunc, sit amet pulvinar nibh commodo non. Aliquam erat volutpat.\n\nAliquam sit amet egestas enim, et varius nibh. Pellentesque consectetur molestie lacus, ut tempor tortor pretium sit amet. Praesent ac dignissim felis, quis elementum tortor. Cras a malesuada ipsum. Mauris vitae tristique odio. Ut id ipsum maximus, posuere neque ut, rhoncus mauris. Fusce elit tortor, mattis et scelerisque nec, vestibulum vitae risus. In quis accumsan arcu. Sed sed velit leo.\n\nVivamus vulputate lorem at posuere interdum. Vivamus fermentum vitae risus consectetur placerat. Morbi lobortis sed mauris sed eleifend. Morbi non sapien a elit semper faucibus non vitae sapien. Praesent sagittis porttitor lacus pulvinar hendrerit. Nullam a lacus mi. Sed in pulvinar diam. Vivamus id egestas nulla, vitae euismod ipsum.",
    "skills": "Web",
    "no_positions": "1",
    "job_position": "Developer",
    "gender_spec": "Male",
    "job_time": "job_time",
    "experience": "1 Year",
    "city": "Lahore",
    "status": "approve",
    "post_date": "2017-04-08 16:01:28"
  }, {
    "id": "2",
    "company_id": "1",
    "job_title": "Full Stack Php Developer",
    "descr": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis magna non arcu cursus pharetra et posuere est. Curabitur nibh neque, euismod eget felis sed, gravida cursus risus. Praesent mattis rutrum posuere. Integer eget odio mauris. Fusce luctus, ex nec lobortis vestibulum, arcu arcu suscipit magna, at gravida erat lorem sit amet est. Duis eget ante non ante blandit scelerisque vel et nunc. Nullam a nisl tincidunt, congue risus in, scelerisque ipsum. Phasellus fermentum, nibh id convallis varius, orci urna feugiat velit, in imperdiet dolor nulla non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vel quam ex. Morbi a nibh efficitur, viverra odio eget, feugiat massa. Etiam rhoncus, metus at lobortis dapibus, quam mi auctor odio, a vestibulum ante justo pellentesque urna. Donec vel ante ac lacus commodo bibendum facilisis non ex. In tortor quam, commodo vel posuere vel, iaculis in quam. Nam aliquam ligula nunc, sit amet pulvinar nibh commodo non. Aliquam erat volutpat.\n\nAliquam sit amet egestas enim, et varius nibh. Pellentesque consectetur molestie lacus, ut tempor tortor pretium sit amet. Praesent ac dignissim felis, quis elementum tortor. Cras a malesuada ipsum. Mauris vitae tristique odio. Ut id ipsum maximus, posuere neque ut, rhoncus mauris. Fusce elit tortor, mattis et scelerisque nec, vestibulum vitae risus. In quis accumsan arcu. Sed sed velit leo.\n\nVivamus vulputate lorem at posuere interdum. Vivamus fermentum vitae risus consectetur placerat. Morbi lobortis sed mauris sed eleifend. Morbi non sapien a elit semper faucibus non vitae sapien. Praesent sagittis porttitor lacus pulvinar hendrerit. Nullam a lacus mi. Sed in pulvinar diam. Vivamus id egestas nulla, vitae euismod ipsum.",
    "skills": "Web",
    "no_positions": "3",
    "job_position": "Developer",
    "gender_spec": "Male",
    "job_time": "job_time",
    "experience": "1 Year",
    "city": "Delhi",
    "status": "approve",
    "post_date": "2017-04-08 20:24:02"
  }];
  
  $scope.clickEvt = function(e, data) {
    if (e.target.checked) {
      $scope.conditions.push(data.city);
    } else {
      $scope.conditions.splice($scope.conditions.indexOf(data.city), 1);
    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <div ng-repeat="f in alljobs">
    <input type='checkbox' ng-click="clickEvt($event, f)"> {{f.city}}
  </div>
  Conditions: {{conditions}}
  <ul>
    <li ng-repeat="f in alljobs | sampleFilter: conditions">{{f.city}}</li>
  </ul>
</body>

</html>