ngQueryBuilder | Angular Query Builder

An elegant, easily customizable SQL Query Builder in Angular.

Description

• An angular directive for Formula/Query Builder.
• Works well with/without Bootstrap/Foundation.

Dependecies

• Angular.js
• jQuery

Installation

Install using bower

bower install ngQueryBuilder 

or

Get the queryBuilder.min.js & queryBuilder.css files from dist folder.

Usage

• Make sure you include the ngQueryBuilder module in you angular app:

angular.module('myApp', ['ngQueryBuilder']); 

• once you've added the module in your app. Use the code below to get the query builder up and running:

<query-builder data="query"                                        // Object in which the query will be reflected  			columns="columns"               //Columns for building query (Should be Array of Strings | eg - ['NAME', 'AGE', 'GENDER']) 			operations="operations">   //Operations  which are to be applied on columns (Should be Array of Strings | eg - ['<', '>', '=']) </query-builder>	 

Output JSON

 { 	"bracketIds": [3, 2, 1, 1, 2, 3], //Storing Ids for easier repopulation of stored queries 	"expression": "(((0OR1)AND2)AND3)", // Expression corresponding to the query created by the user. 	"operands": { // Stores the variables referenced in the expression above 		"0": { 			"colName": "FirstName", 			"custom": "", 			"operation": "is", 			"type": "basic", 			"value": "Tom" 		}, 		"1": { 			"colName": "LastName", 			"custom": "", 			"operation": "==", 			"type": "basic", 			"value": "Cruise" 		}, 		"2": { 			"colName": "Age", 			"custom": "", 			"operation": ">", 			"type": "basic", 			"value": "30" 		}, 		"3": { 			"colName": "", 			"custom": "someFunction(convertHeightToCms(height))", 			"operation": "", 			"type": "custom", 			"value": "" 		} 	} }  

Customization

• You can easily customize the look and feel of the query builder by changing the following variables in the queryBuilder.scss file as per your requirement:

$border-color: #EAEAEA; // border color for the dropdown & the list inside the dropdown $label-background: #444; //background of label showing operators (AND, OR, +, - ,etc) $text-color: #333; // Color of text $light-gray: #FAFAFA; // Color of popover header 

• Run gulp sass to get the complied css file from css/multiselectdropdown.css

Demo

visit http://fauzankhan.github.io/angular-query-builder/ to see the Query Builder in action