JSFiddle - React, Tailwind, and code Playground
by bullrout
HTML
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<body ng-app="app">
<div ng-controller="ctrl">
<div class="form-group">
<label for="cb">filter all names with has kitchen in the title</label>
<input type="checkbox" id="cb" ng-model="word" ng-true-value="has kitchen" ng-false-value="">
</div>
<div class="form-group">
<label for="cb1">filter all names with has bakery in the title</label>
<input type="checkbox" id="cb1" ng-model="word" ng-true-value="has bakery" ng-false-value="">
</div>
<div class="row col-md-9 col-lg-9 pull-right" data-ng-repeat="resultItem in data.list | showByfilValue:word">
{{ resultItem.address }}
<!-- <span>{{ resultItem.services[0].services[0].serviceName }}</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": "five",
"services": [
{
"services": [
{
"serviceName": "has kitchen"
},
{
"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"
}
]}
});
app.filter('showByfilValue', function () {
return function (items, word) {
var filtered = [];
if (typeof word !== 'undefined') {
var letterMatch = new RegExp('^' + word + '$', 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (letterMatch.test(item.services[0].services[0].serviceName)) {
filtered.push(item);
}
}
return filtered;
} else {
//return data;
}
};
});