angular-query-builder

WebJar for angular-query-builder

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular-query-builder
Last Version	1.3.0
Release Date	Aug 9, 2018
Type	jar
Description	angular-query-builder WebJar for angular-query-builder
Project URL	http://webjars.org
Source Code Management	https://github.com/tiste/angular-query-builder

Download angular-query-builder

Filename	Size
angular-query-builder-1.3.0.pom
angular-query-builder-1.3.0.jar	28 KB
angular-query-builder-1.3.0-sources.jar	22 bytes
angular-query-builder-1.3.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-query-builder/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-query-builder</artifactId>
    <version>1.3.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular-query-builder/
implementation 'org.webjars.npm:angular-query-builder:1.3.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular-query-builder/
implementation ("org.webjars.npm:angular-query-builder:1.3.0")

Apache Buildr

'org.webjars.npm:angular-query-builder:jar:1.3.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angular-query-builder" rev="1.3.0">
  <artifact name="angular-query-builder" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular-query-builder', version='1.3.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular-query-builder" % "1.3.0"

Leiningen

[org.webjars.npm/angular-query-builder "1.3.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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: '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?

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes using commitizen (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

Versions

Version
1.3.0 Aug 9, 2018