JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<body ng-app="app">
<div ng-controller="ctrl">
<div class="form-group">
<label for="cb">hi mum</label>
<input type="checkbox" id="cb" ng-click="includeService('one')">
</div>
<div class="row col-md-9 col-lg-9 pull-right" data-ng-repeat="resultItem in data.list | filter:serviceFilter">
<span>{{ resultItem.name }}</span>
</div>
</div>
</body>
JavaScript
var app = angular.module('app', []);
app.controller("ctrl", function cntrl($scope){
$scope.data = {"list": [
{
"name": "one",
"services": [
{
"services": [
{
"serviceName": "has bakery"
},
{
"serviceName": "has dispensary"
}
]
}
],
"address": "21 regent st chippendale"
},
{
"name": "two",
"services": [
{
"services": [
{
"serviceName": "has bakery"
},
{
"serviceName": "has dispensary"
},
{
"serviceName": "has food hall"
},
{
"serviceName": "has kitchen"
}
]
}
],
"address": "25 regent st chippendale"
},
{
"name": "three",
"services": [
{
"services": [
{
"serviceName": "has food hall"
},
{
"serviceName": "has kitchen"
}
]
}
],
"address": "25 regent st chippendale"
}
]}
$scope.serviceIncludes = [];
$scope.includeService = function(strValue) {
var i = $.inArray(strColourValue, $scope.serviceIncludes);
if (i > -1) {
$scope.serviceIncludes.splice(i, 1);
} else {
$scope.serviceIncludes.push(strValue);
}
}
$scope.serviceFilter = function(serviceVal) {
console.log(serviceVal);
if ($scope.serviceIncludes.length > 0) {
if ($.inArray(serviceVal.name, $scope.serviceIncludes) < 0)
return;
}
return serviceVal;
}
});