angular-query-builder

angular-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: 'Lastname', value: 'lastname' },
        { name: 'Birthdate', value: 'birthdate' },
        { name: 'City', value: 'city' },
        { 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

License

MIT