StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is how we do it with a custom filter.</p> <p><strong>DEMO</strong>: <a href="http://plnkr.co/edit/q7tYjOvFjQHSR0QyGETj?p=preview" rel="nofollow">http://plnkr.co/edit/q7tYjOvFjQHSR0QyGETj?p=preview</a>)</p> <pre><code>[array] | search:query:columns:operator > query: this is the term you are looking for > columns: an array of the names of the properties you want to look for (if empty, will use the angular filter with query) > operator: a boolean to switch between OR (true) and AND (false, default) </code></pre> <p><strong>html</strong></p> <pre><code><ul> <li ng-repeat="item in list | search:query:['name','location']:operator"> <pre>{{item | json}}</pre> </li> </ul> </code></pre> <p><strong>js</strong></p> <pre><code>app.filter('search', function($filter) { return function(input, term, fields, operator) { if (!term) { return input; } fields || (fields = []); if (!fields.length) { return $filter('filter')(input, term); } operator || (operator = false); // true=OR, false=AND var filtered = [], valid; angular.forEach(input, function(value, key) { valid = !operator; for(var i in fields) { var index = value[fields[i]].toLowerCase().indexOf(term.toLowerCase()); // OR : found any? valid if (operator && index >= 0) { valid = true; break; } // AND: not found once? invalid else if (!operator && index < 0) { valid = false; break; } } if (valid) { this.push(value); } }, filtered); return filtered; }; }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload