angular-bind-querystring
v1.0.1
Published
Two way binding between scope variables and URL querystring with default values
Downloads
4
Maintainers
Readme
angular-bind-querystring
Two way binding between scope variables and URL querystring with default values.
Installation
Angular is a peer-dependency of this project so you need to install it separately.
Install with NPM
npm install --save angular-bind-querystring
Install with Bower
bower install --save angular-bind-querystring
Setup
Load the script
Add the dist/angular-bind-querystring.min.js
to your HTML file.
Add as dependency
Add bindQuerystring
module as a dependency of your Angular app:
angular.module('yourModule', ['bindQuerystring']);
Usage
angular.module('yourModule').controller(function($scope, bindQuerystring) {
var target = {};
bindQuerystring({
target: target,
properties: ['foo']
});
});
Then every change on URL querystring or the target object (given the selected properties) will be reflected in both.
Parser and formatter
You can send a parser and/or a formatter function to handle the value serialization:
angular.module('yourModule').controller(function($scope, bindQuerystring) {
var target = {};
bindQuerystring({
target: target,
properties: ['foo'],
parser: function(value, property) {
// parse value from querystring to scope property
return parseInt(value);
},
formatter: function(value, property) {
// formats value from scope property to querystring
return '' + value;
}
});
});
Parsers and formatters receive the actual value and the name of the property being transformed.
Options
target
- the object that holds the properties being boundproperties
- an array of strings naming the properties that should be boundscope
(optional) - isn't required, but prevents memory leak over timeparser
(optional) - function that converts the URL query string to your modelformatter
(optional) - function that converts your model to the URL query string
Contributing
Any help is appreciated, feel free to open issues and submit pull requests.