如何通過這裏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>