https://github.com/tiste/angular-query-builder
Query builder as JSON from angular directive
https://github.com/tiste/angular-query-builder
angular gh-pages package
Last synced: 3 months ago
JSON representation
Query builder as JSON from angular directive
- Host: GitHub
- URL: https://github.com/tiste/angular-query-builder
- Owner: tiste
- License: mit
- Created: 2016-07-15T14:06:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-08-27T19:57:04.000Z (over 1 year ago)
- Last Synced: 2025-12-16T15:28:28.955Z (4 months ago)
- Topics: angular, gh-pages, package
- Language: HTML
- Homepage: https://tiste.github.io/angular-query-builder
- Size: 45.9 KB
- Stars: 12
- Watchers: 4
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-query-builder
Query builder as JSON from angular directive
## Install
`$ npm install -SE angular-query-builder`
Add it as an angular dependency:
```js
angular.module('app', [
'ngQueryBuilder',
]);
```
## Usage
Simply define an options object:
```js
$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:
```html
```
You can now get the result as `{{options.query}}`
### Templating
You can use your own template by setting a `templateUrl` in the directive:
```html
```
or
```js
$scope.options = {
templateUrl: '/src/query-builder-group-directive.html',
};
```
> The template needs to be recursive. You can have a look [at the project one](https://github.com/tiste/angular-query-builder/blob/master/src/query-builder-group-directive.html).
## Build
Just run `npm run dev` to start webserver, and build everything with `npm run build`
## Want to help?
1. [Fork it](https://github.com/tiste/angular-query-builder/fork)
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes using [commitizen](https://github.com/commitizen/cz-cli) (`git commit -am 'feat: add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request
## License
[MIT](https://github.com/tiste/angular-query-builder/blob/master/LICENCE)