chrismatheson / ngMediaFilter

An angular filter that uses window.matchMedia to allow filtering data on specific media query matches

ngMediaFilter

An angular filter that uses window.matchMedia to allow filtering data on specific media query matches

##Usage The filter comes with three rules with values taken from twitter bootstrap

{
  desktop : "(min-width: 979px)",
  tablet : "(min-width: 768px) and (max-width: 979px)"
  phone : "(max-width: 767px)"
}

you can now filter with the syntax <defaultVal> | media:<rule>:<value>

example

<div pagination max-size="20 | media:'phone':5 | media:'tablet':10" num-pages="prospects.Pages" current-page="prospects.Page"></div>

##Config

These setting scan be changed by injecting mediaFilterProvider into the config function of your module and chaning the mediaFilterProvider.rules with your own rule key value pairs E.G.

angular.module('app').config(['mediaFilterProvider', function (mediaFilterProvider) {
  mediaFilterProvider.rules.phone = "(max-width: 500px)";
  mediaFilterProvider.rules.huge: = "(max-width: 1500px)";
}]);