Javascript 通过选择多个或单个复选框筛选数据，如果不选择，则应以angularjs显示所有结果

我想在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>

安古拉斯普朗克
{{f.city}

{{f.city}

通过

筛选：{included:true}

，您将使用属性

included

和值

true

筛选项目，并且由于您将

included:true

动态添加到

所有作业

，如果要显示所有数据，您必须使用

include: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;
    });
  }
});

app.filter（“sampleFilter”，函数（）{
返回功能（输入、选项）{
如果（！输入）返回[]；
如果（！options | | options.length==0）返回输入；
返回输入。过滤器（函数（项）{
对于（变量i=0；i-1）{//仅过滤城市属性，则可以添加更多。
返回true；
};
};
返回false；
});
}
});

请参考下面的示例


var-app=angular.module（'plunker'，[]）；
app.filter（“sampleFilter”，函数（）{
返回功能（输入、选项）{
如果（！输入）返回[]；
如果（！options | | options.length==0）返回输入；
返回输入。过滤器（函数（项）{
对于（变量i=0；i-1）{
返回true；
};
};
返回false；
});
}
});
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.conditions=[]；
$scope.alljobs=[{
“id”：“1”，
“公司id”：“1”，
“job_title”：“全堆栈ngularJs开发人员”，
“描述”："我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识获得一个非赌注的温和的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。佩伦特式的居住者莫比·特里斯蒂克·塞内特斯和内特斯·梅勒苏达·埃吉斯塔斯。一个非维利的权杖效率，维韦拉·奥迪奥·埃吉特，福吉亚·马萨。埃蒂安·朗卡斯，达比布斯的梅特斯，奥迪奥拍卖行，佩伦茨克乌尔纳广场的前庭。在托托码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所在.\n\n他坐在埃吉斯塔斯·埃尼姆和瓦里乌斯·尼布的位子上。他坐在埃米特·埃吉斯塔斯的位子上，他坐在埃米特·埃吉斯塔斯的位子上。他坐在埃吉斯塔斯·埃尼姆和瓦里乌斯·尼布的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯塔斯的位子上，他坐在埃吉斯塔斯的位子上。他坐在奥迪奥的位子上，他的位子上这是一个充满活力的故事。它是一个充满活力的故事。它是一个充满活力的故事。它是一个充满活力的故事。它是一个充满活力的故事。它是一个充满活力的故事。它是一个充满活力的故事我的意思是，我自己的生命。”，
“技能”：“网络”，
“无职位”：“1”，
“工作职位”：“开发人员”，
“性别规格”：“男性”，
“工作时间”：“工作时间”，
“经验”：“1年”，
“城市”：“拉合尔”，
“状态”：“批准”，
“发布日期”：“2017-04-08 16:01:28”
}, {
“id”：“2”，
“公司id”：“1”，
“job_title”：“完整堆栈Php开发人员”，
“描述”：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识是：我的知识获得一个非赌注的温和的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。一个非赌注的权杖。佩伦特式的居住者莫比·特里斯蒂克·塞内特斯和内特斯·梅勒苏达·埃吉斯塔斯。一个非维利的权杖效率，维韦拉·奥迪奥·埃吉特，福吉亚·马萨。埃蒂安·朗卡斯，达比布斯的梅特斯，奥迪奥拍卖行，佩伦茨克乌尔纳广场的前庭。在托托码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所，在码头上做一个无需更换的厕所在.\n\n他坐在埃吉斯塔斯·埃尼姆和瓦里乌斯·尼布的位子上。他坐在埃米特·埃吉斯塔斯的位子上，他坐在埃米特·埃吉斯塔斯的位子上。他坐在埃吉斯塔斯·埃尼姆和瓦里乌斯·尼布的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯的位子上。他坐在埃吉斯塔斯塔斯的位子上，他坐在埃吉斯塔斯的位子上。他坐在奥迪奥的位子上，他的位子上这是一个充满活力的故事。它是一个充满活力的故事。它是一个充满活力的故事