Skip to content
This repository has been archived by the owner on Jul 30, 2024. It is now read-only.

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

Notifications You must be signed in to change notification settings

chrismatheson/ngMediaFilter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published