What is AngularJS Query Builder?

This directive lets the end user create queries in a visual manner.

In this page you can see basic and advanced usage examples.

Download

There are several options to do that:

Example Output Readable

Example Output as string

Example Output Readable

Example Output as string

Example Output Readable

Example Output as string

Example Output Readable

Example Output as string

Example Output Readable

Example Output as string

List of allowed attributes, you can find more information about them in the usage examples above.

Attribute Name	Type	Optional	Description
fields	Array	no	An array of the possible values of the left side of an expression.
operators	Array	no	An array of the possible values of the operators in the query. (For example and, or, ...)
comparators	Array	no	An array of the possible values of the comparators of an expression.
group	Object	no	The query as an object
as-string	string	yes	Used for input as string.
watch-for-string	bool	yes	When set to true directive will watch for as-string to change and then parse that value. Once parsed watch-for-string is set back to false.
settings	Object	yes	A settings object that can be passed to the directive
title	string	yes	Title of the query builder. Displayed when settings.bootstrapPanelsEnabled is true

List of the properties of the objects in the fields array

Property Name	Type	Optional	Description
id	Object	no	A unique indentifier of the field
name	string	no	A name for the field. This is what is displayed in the select box
options	Array	yes	An array of the possible values for the field. Needs to have an id and when not using custom comparator data templates also a name.
disabledComparators	Array	yes	An array of ids of the comparators that can not be used with this field.

List of the properties of the objects in the operators array

Property Name	Type	Optional	Description
value	string	no	A unique indentifier of the operator
name	string	no	A name for the operator. This is what is displayed in the select box

List of the properties of the objects in the operators array

Property Name	Type	Optional	Description
id	Object	no	A unique indentifier of the comparator
name	string	no	A name for the comparator. This is what is displayed in the select box
dataTemplate	string	yes	String refering to a template that has been put into the $templateCache. Template can use the options of the field with 'rule.field.options' and needs to set 'rule.data' to an object or an array of objects with an id
defaultData		only when dataTemplate is used	When using a dataTemplate the data will be initialized to this.

Property Name	Type	Optional	Description
nesting	boolean	yes	Enable or disable nesting
addIconClass	string	yes	The class of the span in the Add condition or group button
removeIconClass	string	yes	The class of the span in the Remove condition or group button
addButtonClass	string	yes	The class Add condition or group button
removeButtonClass	string	yes	The class Remove condition or group button
onlyAllowFieldsOnce	boolean	yes	When true a field can only be used in a query once

The queryService is available for injection with 'queryService'

asString(group)

Converts the object that is returned by the directive to a string representation and uses id's where possible

asReadable(group)

Converts the object that is returned by the directive to a string representation and uses names where possible and spaces to keep it readable

parseFromString(string, fields, operators, comparators)

Converts a string outputted by asString back to an object using the fields, operators and comparators passed to the function.