GitHunt
CH

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)";
}]);

Languages

JavaScript100.0%

Contributors

Created June 26, 2013
Updated July 30, 2024
chrismatheson/ngMediaFilter | GitHunt