angularjs - I want to filter the JSON data based on checkbox clicked but it is working only when more than one checkbox is clicked -
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script> var myapp = angular.module('myapp', []); myapp.controller('checkboxcontroller', function ($scope) { //json data filtered based on last 4 properties $scope.patients=[{ "id": 160, "email": "test.lnt.hillrom+stephenmurphy904@gmail.com", "firstname": "stephen", "lastname": "murphy", "isdeleted": false, "zipcode": 55110, "address": "39 xswhss lane ", "city": "white bear lake", "dob": "12/21/1947", "gender": "male", "title": null, "hillromid": "46399", "langkey": null, "middlename": null, "state": "mn", "mobilephone": null, "primaryphone": null, "createdat": 1490167354000, "isactivated": true, "adherence": 98, "lasttransmissiondate": "2017-03-20", "lastloggedinat": null, "clinics": [], "hcp": null, "clinicmrnid": { }, "clinicnamescsv": "jeffrey,cathy general hospital", "hcpnamescsv": null, "mrnid": null, "hoursofusage": 0.0, "serialnumber": null, "devicetype": "vest", "expired": false, "issettingsdeviated": false, "ishmrnoncompliant": true, "ismissedtherapy": false, "isnoevent": false, "devicetypevest": true, "devicetypemonarch": false }, { "id": 639, "email": "test.lnt.hillrom+thomasprice986@gmail.com", "firstname": "thomas", "lastname": "price", "isdeleted": false, "zipcode": 54214, "address": "57 emwzfe lane ", "city": null, "dob": "04/18/1955", "gender": null, "title": null, "hillromid": "22038", "langkey": null, "middlename": null, "state": null, "mobilephone": null, "primaryphone": null, "createdat": 1490167354000, "isactivated": true, "adherence": 92, "lasttransmissiondate": "2017-03-20", "lastloggedinat": null, "clinics": [], "hcp": null, "clinicmrnid": { }, "clinicnamescsv": "matthew,cathy general hospital", "hcpnamescsv": null, "mrnid": null, "hoursofusage": 0.0, "serialnumber": null, "devicetype": "vest", "expired": false, "isdeleted": false, "issettingsdeviated": false, "ishmrnoncompliant": true, "ismissedtherapy": false, "isnoevent": false, "devicetypevest": true, "devicetypemonarch": false }, { "id": 43, "email": "test.lnt.hillrom+timothytaylor314@gmail.com", "firstname": "timothy", "lastname": "taylor", "isdeleted": false, "zipcode": 92647, "address": "9 jcktpp lane ", "city": null, "dob": "11/12/1930", "gender": null, "title": null, "hillromid": "10640", "langkey": null, "middlename": null, "state": null, "mobilephone": null, "primaryphone": null, "createdat": 1490167354000, "isactivated": true, "adherence": 98, "lasttransmissiondate": "2017-03-20", "lastloggedinat": null, "clinics": [], "hcp": null, "clinicmrnid": { }, "clinicnamescsv": "michelle,cathy general hospital", "hcpnamescsv": null, "mrnid": null, "hoursofusage": 0.0, "serialnumber": null, "devicetype": "both", "expired": false, "issettingsdeviated": false, "ishmrnoncompliant": true, "ismissedtherapy": false, "isnoevent": false, "devicetypevest": true, "devicetypemonarch": true }, { "id": 642, "email": "test.lnt.hillrom+williamtorres381@gmail.com", "firstname": "william", "lastname": "torres", "isdeleted": false, "zipcode": 68124, "address": "97 qxqkcg park ", "city": null, "dob": "12/18/1953", "gender": null, "title": null, "hillromid": "56209", "langkey": null, "middlename": null, "state": null, "mobilephone": null, "primaryphone": null, "createdat": 1490167354000, "isactivated": true, "adherence": 72, "lasttransmissiondate": "2017-03-20", "lastloggedinat": null, "clinics": [], "hcp": null, "clinicmrnid": { }, "clinicnamescsv": "janet,cathy general hospital", "hcpnamescsv": null, "mrnid": null, "hoursofusage": 0.0, "serialnumber": null, "devicetype": "monarch", "expired": false, "issettingsdeviated": false, "ishmrnoncompliant": false, "ismissedtherapy": false, "isnoevent": false, "devicetypevest": false, "devicetypemonarch": true }, { "id": 92, "email": "test.lnt.hillrom+nancywashington265@gmail.com", "firstname": "nancy", "lastname": "washington", "isdeleted": false, "zipcode": 55373, "address": "28 huekni street ", "city": "rockford", "dob": "02/16/1968", "gender": null, "title": null, "hillromid": "87291", "langkey": null, "middlename": null, "state": "mn", "mobilephone": null, "primaryphone": null, "createdat": 1490167354000, "isactivated": true, "adherence": 96, "lasttransmissiondate": "2017-03-19", "lastloggedinat": null, "clinics": [], "hcp": null, "clinicmrnid": { }, "clinicnamescsv": "jeffrey,cathy general hospital", "hcpnamescsv": null, "mrnid": null, "hoursofusage": 0.0, "serialnumber": null, "devicetype": "monarch", "expired": false, "issettingsdeviated": false, "ishmrnoncompliant": false, "ismissedtherapy": true, "isnoevent": false, "devicetypevest": true, "devicetypemonarch": true }]; var init = function () { $scope.searchfilter = {}; $scope.searchfilter.ishmrnoncompliant = false; $scope.searchfilter.issettingsdeviated = false; $scope.searchfilter.ismissedtherapy = false; $scope.searchfilter.isnoevent = false; $scope.searchfilter.devicetypevest = false; $scope.searchfilter.devicetypemonarch = false; }; init(); }); </script> </head> <body ng-app="myapp"> <div ng-controller="checkboxcontroller"> <h3 style="text-align:center;">angularjs - retrieve multiple checkbox selected options</h3> <div> <div> <div> <input type="checkbox" ng-model="searchfilter.issettingsdeviated" />issettingsdeviated <input type="checkbox" ng-model="searchfilter.ishmrnoncompliant" />ishmrnoncompliant <input type="checkbox" ng-model="searchfilter.ismissedtherapy" />ismissedtherapy <input type="checkbox" ng-model="searchfilter.isnoevent" />isnoevent <input type="checkbox" ng-model="searchfilter.devicetypevest" />devicetypevest <input type="checkbox" ng-model="searchfilter.devicetypemonarch" />devicetypemonarch <p ng-repeat="patient in patients | filter: { isnoevent:searchfilter.isnoevent,issettingsdeviated:searchfilter.issettingsdeviated,ismissedtherapy:searchfilter.ismissedtherapy,ishmrnoncompliant:searchfilter.ishmrnoncompliant,devicetypevest:searchfilter.devicetypevest,devicetypemonarch:searchfilter.devicetypemonarch }">{{patient.lastname}}, {{patient.firstname}}</p> </div> </div> </div> </div> </body> </html>
you have individually add different filters options have provided. have added minimal version of requirement in fiddle. please take @ fiddle. in html, have call this.
<p ng-repeat="patient in patients | isnoevent:searchfilter.isnoevent | issettingsdeviated:searchfilter.issettingsdeviated ">{{patient.lastname}}, {{patient.firstname}}</p>
Comments
Post a Comment