JarCastingangular-query-builder
Query builder as JSON from angular directive
Install
$ npm install -SE angular-query-builder
Add it as an angular dependency:
angular.module('app', [
'ngQueryBuilder',
]);
Usage
Simply define an options object:
$scope.options = {
fields: [
{ name: 'Firstname', value: 'firstname' },
{ name: 'Birthdate', value: 'birthdate', attrs: { type: 'date' } },
{ name: 'City', value: 'city', attrs: { type: 'text', 'required': true } },
{ name: 'Country', value: 'country' },
],
// optional operators
operators: [
{ name: 'AND', value: '$and' },
{ name: 'OR', value: '$or' },
],
// ... and conditions
conditions: [
{ name: 'equal', value: '$eq' },
{ name: 'is not equal', value: '$neq' },
{ name: 'less than', value: '$lt' },
{ name: 'less than or equal', value: '$lte' },
{ name: 'greater than', value: '$gt' },
{ name: 'greater than or equal', value: '$gte' },
],
};
Then add the directive to your view:
<div query-builder="options"></div>
You can now get the result as {{options.query}}
Templating
You can use your own template by setting a templateUrl in the directive:
<div query-builder="options" template-url="templateUrl"></div>
or
$scope.options = {
templateUrl: '/src/query-builder-group-directive.html',
};
The template needs to be recursive. You can have a look at the project one.
Build
Just run npm run dev to start webserver, and build everything with npm run build
Want to help?
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes using commitizen (
git commit -am 'feat: add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request