I've made a simple table with repeating rows based on an array using ng-repeat. I've added a filter similar to this example.
My problem comes when I try to filter on the nested object. It is always a single object, basically it is the parent to my current object but it's the full object instead of just the FK value.
If I use filterText.educationCenter.name it filters all rows out of the table and will not return them even if I clear the filter. I have to do a full reload.
If I filter on just filterText.educationCenter it will work but it searches all fields of the entire object.
I would like to keep the JSON as it is and filter the table results based on the name of the educationCenter object.
My HTML
Search: <input ng-model="filterText.$"/>
<input ng-model="filterText.city"/>
<input ng-model="filterText.educationCenter.name"/>
<tr ng-repeat="course in courses | filter:filterText | startFrom:currentPage*pageSize | limitTo:pageSize">
<td width="145">{{course.city}}</td>
<td width="145">{{course.educationCenter.name}}</td>
...
My JSON for a singe object from the array
{"id":"108"
,"city":"My City"
,"educationCenter":{"id":"3"
,"description":"This is the ed center description"
,"name":"test ed center 1"}
,"noOfDays":"1"}
As @fastreload suggested, I think you'll have to make your own filter.
Here is the sample of the recursive filter.
(it does not support $ notation though, and I'm sure it is missing
some edge case support.)
app.filter('recursiveFilter', function() {
var compare = function(input_, cond_) {
if (!cond_) return true;
if (typeof input_ == "string" && typeof cond_ == "string") {
return (new RegExp(cond_)).test(input_);
} else if (typeof input_ == "object" && typeof cond_ == "object") {
for (var s in cond_) {
if (!compare(input_[s], cond_[s])) return false;
}
return true;
}
return false;
};
return function(inputs, cond) {
return $.grep(inputs, function(input) {
return compare(input, cond);
});
};
});