如何通过这里angularJs和PHP

Question

我试图使用复选框，当用户选择任何一个或多个复选框数据应相应更新，增加了过滤选择复选框.. 我做什么过滤数据，但它不工作...

<input type="checkbox" name="cityFilter" ng-checked="cityFilter" ng-model="cityFilter" value="Lahore"> Lahore 



<div class="job-box" ng-repeat="oneActivejob in allJobs | filter :cityFilter"> 

这里是Json respnse。

[{"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":"Lahore","status":"approve","post_date":"2017-04-08 20:24:02"}] 

Answer 1

你的复选框，应该有一个NG-值，

<input type="checkbox" data-ng-model='search.city1' data-ng-true-value='Lahore' data-ng-false-value='' /> Lahore 

演示

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" 
 
    }]; 
 
});

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