index.html

﻿<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AngularJs Query Builder by MyForce</title>

	<link href="./css/styles.css" rel="stylesheet">
	<link href="./css/bootstrap.min.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
</head>
<body>
	<header>
		<div class="inner">
			<a href="https://github.com/myforce/AngularQueryBuilder" class="btn btn-info pull-right gh-button-link">
				<strong>
					View project on
					<br />GitHub
				</strong>
			</a>
			<h1>AngularJS Query Builder</h1>
		</div>
	</header>
	<div class="container" ng-controller="QueryBuilderCtrl">
		<div class="row">
			<div class="col-xs-12">
				<h1 style="margin-bottom: 0">What is AngularJS Query Builder?</h1>
				This directive lets the end user create queries in a visual manner.
				<br />
				<br />In this page you can see basic and advanced usage examples.
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<h2 style="margin-bottom: 0">Download</h2>
				There are several options to do that:
				<ol>
					<li>Using bower: `bower install myforce-angularjs-query-builder`</li>
					<li>
						Download the .zip file from <a href="https://github.com/myforce/AngularQueryBuilder/zipball/master">here</a>
					</li>
					<li>
						Using it from GitHub raw using <a href="https://rawgit.com/myforce/AngularQueryBuilder/master/query-builder-directive.js">this link</a>
					</li>
				</ol>
			</div>
		</div>
		<accordion close-others="true">
			<accordion-group heading="Basic Usage Example" is-open="true">
				<div class="row">
					<div class="col-xs-12 col-sm-12">
						<h3>Demo</h3>
						<div class="well">
							<div class="alert alert-info">
								<strong>Example Output Readable</strong><br />
								<p ng-bind-html="outputReadable"></p>
								<strong>Example Output as string</strong><br />
								<p ng-bind-html="outputString"></p>
							</div>

							<query-builder title="Query builder" settings="settings1" fields="fields1" operators="operators1" comparators="comparators1" group="filter1.group"></query-builder>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h3>Code</h3>
						<div hljs hljs-include="'example1'">
						</div>
					</div>
				</div>
			</accordion-group>
			<accordion-group heading="Start From String" is-open="false">
				<div class="row">
					<div class="col-xs-12 col-sm-12">
						<h3>Demo</h3>
						<div class="well">
							<div class="alert alert-info">
								<strong>Example Output Readable</strong><br />
								<p ng-bind-html="output2Readable"></p>
								<strong>Example Output as string</strong><br />
								<p ng-bind-html="output2String"></p>
							</div>

							<query-builder title="query-builder" fields="fields2" operators="operators2" comparators="comparators2" group="filter2.group" settings="settings2" as-string="queryAsString2"></query-builder>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h3>Code</h3>
						<div hljs hljs-include="'example2'">
						</div>
					</div>
				</div>
			</accordion-group>
			<accordion-group heading="Custom Selection Template" is-open="false">
				<div class="row">
					<div class="col-xs-12 col-sm-12">
						<h3>Demo</h3>
						<div class="well">
							<div class="alert alert-info">
								<strong>Example Output Readable</strong><br />
								<p ng-bind-html="output3Readable"></p>
								<strong>Example Output as string</strong><br />
								<p ng-bind-html="output3String"></p>
							</div>

							<query-builder fields="fields3" operators="operators3" comparators="comparators3" group="filter3.group" settings="settings3"></query-builder>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h3>Code</h3>
						<div hljs hljs-include="'example3'">
						</div>
					</div>
				</div>
			</accordion-group>
			<accordion-group heading="Disable comparators">
				<div class="row">
					<div class="col-xs-12 col-sm-12">
						<h3>Demo</h3>
						<div class="well">
							<div class="alert alert-info">
								<strong>Example Output Readable</strong><br />
								<p ng-bind-html="outputReadable4"></p>
								<strong>Example Output as string</strong><br />
								<p ng-bind-html="outputString4"></p>
							</div>

							<query-builder title="Query builder" settings="settings4" fields="fields4" operators="operators4" comparators="comparators4" group="filter4.group"></query-builder>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h3>Code</h3>
						<div hljs hljs-include="'example4'">
						</div>
					</div>
				</div>
			</accordion-group>
			<accordion-group heading="Only Allow Field Once">
				<div class="row">
					<div class="col-xs-12 col-sm-12">
						<h3>Demo</h3>
						<div class="well">
							<div class="alert alert-info">
								<strong>Example Output Readable</strong><br />
								<p ng-bind-html="outputReadable5"></p>
								<strong>Example Output as string</strong><br />
								<p ng-bind-html="outputString5"></p>
							</div>

							<query-builder title="Query builder" settings="settings5" fields="fields5" operators="operators5" comparators="comparators5" group="filter5.group"></query-builder>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h3>Code</h3>
						<div hljs hljs-include="'example5'">
						</div>
					</div>
				</div>
			</accordion-group>
			<accordion-group heading="Validation">
				<div class="row">
					<div class="col-xs-12 col-sm-12">
						<h3>Demo</h3>
						<div class="well">
							<div class="alert alert-info">
								<strong>Example Output Readable</strong><br />
								<p ng-bind-html="outputReadable6"></p>
								<strong>Example Output as string</strong><br />
								<p ng-bind-html="outputString6"></p>
							</div>

							<query-builder title="Query builder" settings="settings6" fields="fields6" operators="operators6" comparators="comparators6" group="filter6.group"></query-builder>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h3>Code</h3>
						<div hljs hljs-include="'example6'">
						</div>
					</div>
				</div>
			</accordion-group>
		</accordion>
		<h1>Full Directive Documentation</h1>
		<h2>Attributes</h2>
		<p>List of allowed attributes, you can find more information about them in the usage examples above.</p>
		<table class="table table-condensed">
			<thead>
				<tr>
					<th>Attribute Name</th>
					<th>Type</th>
					<th>Optional</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<strong>fields</strong>
					</td>
					<td>Array</td>
					<td>no</td>
					<td>An array of the possible values of the left side of an expression.</td>
				</tr>
				<tr>
					<td>
						<strong>operators</strong>
					</td>
					<td>Array</td>
					<td>no</td>
					<td>An array of the possible values of the operators in the query. (For example and, or, ...)</td>
				</tr>
				<tr>
					<td>
						<strong>comparators</strong>
					</td>
					<td>Array</td>
					<td>no</td>
					<td>An array of the possible values of the comparators of an expression.</td>
				</tr>
				<tr>
					<td>
						<strong>group</strong>
					</td>
					<td>Object</td>
					<td>no</td>
					<td>The query as an object</td>
				</tr>
				<tr>
					<td>
						<strong>as-string</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>Used for input as string.</td>
				</tr>
				<tr>
					<td>
						<strong>watch-for-string</strong>
					</td>
					<td>bool</td>
					<td>yes</td>
					<td>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.</td>
				</tr>
				<tr>
					<td>
						<strong>settings</strong>
					</td>
					<td>Object</td>
					<td>yes</td>
					<td>A settings object that can be passed to the directive</td>
				</tr>
				<tr>
					<td>
						<strong>title</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>Title of the query builder. Displayed when settings.bootstrapPanelsEnabled is true</td>
				</tr>
			</tbody>
		</table>
		<h2>Field Object</h2>
		<p>List of the properties of the objects in the fields array</p>
		<table class="table table-condensed">
			<thead>
				<tr>
					<th>Property Name</th>
					<th>Type</th>
					<th>Optional</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<strong>id</strong>
					</td>
					<td>Object</td>
					<td>no</td>
					<td>A unique indentifier of the field</td>
				</tr>
				<tr>
					<td>
						<strong>name</strong>
					</td>
					<td>string</td>
					<td>no</td>
					<td>A name for the field. This is what is displayed in the select box</td>
				</tr>
				<tr>
					<td>
						<strong>options</strong>
					</td>
					<td>Array</td>
					<td>yes</td>
					<td>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.</td>
				</tr>
				<tr>
					<td>
						<strong>disabledComparators</strong>
					</td>
					<td>Array</td>
					<td>yes</td>
					<td>An array of ids of the comparators that can not be used with this field.</td>
				</tr>
			</tbody>
		</table>
		<h2>Operator Object</h2>
		<p>List of the properties of the objects in the operators array</p>
		<table class="table table-condensed">
			<thead>
				<tr>
					<th>Property Name</th>
					<th>Type</th>
					<th>Optional</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<strong>value</strong>
					</td>
					<td>string</td>
					<td>no</td>
					<td>A unique indentifier of the operator</td>
				</tr>
				<tr>
					<td>
						<strong>name</strong>
					</td>
					<td>string</td>
					<td>no</td>
					<td>A name for the operator. This is what is displayed in the select box</td>
				</tr>
			</tbody>
		</table>
		<h2>Comparator Object</h2>
		<p>List of the properties of the objects in the operators array</p>
		<table class="table table-condensed">
			<thead>
				<tr>
					<th>Property Name</th>
					<th>Type</th>
					<th>Optional</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<strong>id</strong>
					</td>
					<td>Object</td>
					<td>no</td>
					<td>A unique indentifier of the comparator</td>
				</tr>
				<tr>
					<td>
						<strong>name</strong>
					</td>
					<td>string</td>
					<td>no</td>
					<td>A name for the comparator. This is what is displayed in the select box</td>
				</tr>
				<tr>
					<td>
						<strong>dataTemplate</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>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</td>
				</tr>
				<tr>
					<td>
						<strong>defaultData</strong>
					</td>
					<td></td>
					<td>only when dataTemplate is used</td>
					<td>When using a dataTemplate the data will be initialized to this.</td>
				</tr>
				<tr>
					<td>
						<strong>isValid(data, field)</strong>
					</td>
					<td>function</td>
					<td>no</td>
					<td>Should return false when the data is invalid. When it returns false will set the class "invalid" to the condition and when at least 1 is invalid will set the class "query-invalid" to the root div.</td>
				</tr>
			</tbody>
		</table>
		<h2>Settings Object</h2>
		<table class="table table-condensed">
			<thead>
				<tr>
					<th>Property Name</th>
					<th>Type</th>
					<th>Optional</th>
					<th>Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<strong>nesting</strong>
					</td>
					<td>boolean</td>
					<td>yes</td>
					<td>Enable or disable nesting</td>
				</tr>
				<tr>
					<td>
						<strong>addIconClass</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>The class of the span in the Add condition or group button</td>
				</tr>
				<tr>
					<td>
						<strong>removeIconClass</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>The class of the span in the Remove condition or group button</td>
				</tr>
				<tr>
					<td>
						<strong>addButtonClass</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>The class Add condition or group button</td>
				</tr>
				<tr>
					<td>
						<strong>removeButtonClass</strong>
					</td>
					<td>string</td>
					<td>yes</td>
					<td>The class Remove condition or group button</td>
				</tr>
				<tr>
					<td>
						<strong>onlyAllowFieldsOnce</strong>
					</td>
					<td>boolean</td>
					<td>yes</td>
					<td>When true a field can only be used in a query once</td>
				</tr>
			</tbody>
		</table>
		<h1>Full Service Documentation</h1>
		<p>The queryService is available for injection with 'queryService'</p>
		<h2>Methods</h2>
		<div class="panel panel-default">
			<div class="panel-heading">
				asString(group)
			</div>
			<div class="panel-body">
				Converts the object that is returned by the directive to a string representation and uses id's where possible
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				asReadable(group)
			</div>
			<div class="panel-body">
				Converts the object that is returned by the directive to a string representation and uses names where possible and spaces to keep it readable
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				parseFromString(string, fields, operators, comparators)
			</div>
			<div class="panel-body">
				Converts a string outputted by asString back to an object using the fields, operators and comparators passed to the function.
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				isValid(group)
			</div>
			<div class="panel-body">
				Returns true when the group is valid
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				isInValid(group)
			</div>
			<div class="panel-body">
				Returns true when the group is invalid
			</div>
		</div>
	</div>
	<footer>
		<div class="inner">
			<a href="http://www.myforce.be/" class="pull-right">
				<img src="./images/myforcelogokleur.png" />
			</a>
			<p>Contributed by MyForce NV</p>
			<p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
		</div>
	</footer>
<script type="text/ng-template" id="example1">
// HTML
<query-builder title="Query builder" settings="settings1" fields="fields1" operators="operators1" comparators="comparators1" group="filter1.group"></query-builder>
// Javascript
$scope.fields1 = [
	{
		id: 1,
		name: 'Gender'
	},
	{
		id: 2,
		name: 'Age'
	},
	{
		name: 'Favorite city', id: 4
	}
];

$scope.comparators1 = [
	{ id: 1, name: 'equal to', value: '==' },
	{ id: 2, name: 'not equal to', value: '!=' },
	{ id: 3, name: 'smaller than', value: '<' },
	{ id: 4, name: 'smaller than or equal to', value: '<=' },
	{ id: 5, name: 'greater than', value: '>' },
	{ id: 6, name: 'greater than or equal to', value: 'equal to or greater' }
];

$scope.operators1 = [
	{ name: 'AND', value: '&&' },
	{ name: 'OR', value: '||' }
];

$scope.json1 = null;

$scope.filter1 = {
	group: {
		operator: $scope.operators1[0], rules: []
	}
};

$scope.settings1 = {
	nesting: false,
	addIconClass: 'glyphicon glyphicon-plus',
	removeIconClass: 'glyphicon glyphicon-minus',
	addButtonClass: 'btn btn-sm btn-success',
	removeButtonClass: 'btn btn-sm btn-danger'
};
</script>
<script type="text/ng-template" id="example2">
// HTML
<query-builder title="query-builder" fields="fields2" operators="operators2" comparators="comparators2" group="filter2.group" settings="settings2" as-string="queryAsString2"></query-builder>

// Javascript
$scope.fields2 = [
	{
		id: 1,
		name: 'Gender',
		options: [
			{ name: 'male', id: 1},
			{ name: 'female', id: 2}
		],
		disabledComparators: [
			3, 4, 5, 6
		]
	},
	{
		id: 2,
		name: 'Age'
	},
	{
		name: 'Favorite city', id: 3,
		options: [
			{ name: 'paris', id: 1 },
			{ name: 'london', id: 2 },
			{ name: 'brussels', id: 3 }
		],
		disabledComparators: [
			3, 4, 5, 6
		]
	}
];

$scope.comparators2 = [
	{ id: 1, name: 'equal to', value: '=='},
	{ id: 2, name: 'not equal to', value: '!=' },
	{ id: 3, name: 'smaller than', value: '<' },
	{ id: 4, name: 'smaller than or equal to', value: '<=' },
	{ id: 5, name: 'greater than', value: '>' },
	{ id: 6, name: 'greater than or equal to', value: '>=' },
];

$scope.operators2 = [
	{ name: 'AND', value: '&&' },
	{ name: 'OR', value: '||' }
];

$scope.settings2 = {
	nesting: true,
	addIconClass: 'glyphicon glyphicon-plus',
	removeIconClass: 'glyphicon glyphicon-minus',
	addButtonClass: 'btn btn-sm btn-success',
	removeButtonClass: 'btn btn-sm btn-danger'
}

$scope.filter2 = {};
$scope.queryAsString2 = '((2=="23"||3!="2")&&1=="1")';
</script>
<script type="text/ng-template" id="example3">
// HTML
<query-builder fields="fields3" operators="operators3" comparators="comparators3" group="filter3.group" settings="settings3"></query-builder>
// Javascript
$scope.fields3 = [
	{
		name: 'Favorite city', id: 1,
		options: [
			{ label: 'paris', name: 'paris', id: 1 },
			{ label: 'london', name: 'london', id: 2 },
			{ label: 'brussels', name: 'brussels', id: 3 }
		]
	}
];

$templateCache.put('inTemplate',
	'<div ng-dropdown-multiselect options="rule.field.options" selected-model="rule.data"></div>'
);

$scope.comparators3 = [
	{ id: 1, name: 'in', value: '->', dataTemplate: 'inTemplate', defaultData: [] },
	{ id: 2, name: 'equal to', value: '==' }
];

$scope.operators3 = [
	{ name: 'AND', value: '&&' }
];

$scope.settings3 = {
	nesting: false,
	addIconClass: 'glyphicon glyphicon-plus',
	removeIconClass: 'glyphicon glyphicon-minus',
	addButtonClass: 'btn btn-sm btn-success',
	removeButtonClass: 'btn btn-sm btn-danger'
}

$scope.filter3 = {
	group: {
		operator: $scope.operators3[0], rules: []
	}
};
</script>
<script type="text/ng-template" id="example4">
// HTML
<query-builder title="Query builder" settings="settings4" fields="fields4" operators="operators4" comparators="comparators4" group="filter4.group"></query-builder>
// Javascript
$scope.fields4 = [
	{
		id: 1,
		name: 'Gender',
		disabledComparators: [
			1
		]
	},
	{
		id: 2,
		name: 'Age'
	},
	{
		name: 'Favorite city', id: 4
	}
];

$scope.comparators4 = [
	{ id: 1, name: 'equal to', value: '==' },
	{ id: 2, name: 'not equal to', value: '!=' },
	{ id: 3, name: 'smaller than', value: '<' },
	{ id: 4, name: 'smaller than or equal to', value: '<=' },
	{ id: 5, name: 'greater than', value: '>' },
	{ id: 6, name: 'greater than or equal to', value: 'equal to or greater' }
];

$scope.operators4 = [
	{ name: 'AND', value: '&&' },
	{ name: 'OR', value: '||' }
];

$scope.json4 = null;

$scope.filter4 = {
	group: {
		operator: $scope.operators4[0], rules: []
	}
};

$scope.settings4 = {
	nesting: false,
	addIconClass: 'glyphicon glyphicon-plus',
	removeIconClass: 'glyphicon glyphicon-minus',
	addButtonClass: 'btn btn-sm btn-success',
	removeButtonClass: 'btn btn-sm btn-danger'
};
</script>
<script type="text/ng-template" id="example5">
//HTML
<query-builder title="Query builder" settings="settings5" fields="fields5" operators="operators5" comparators="comparators5" group="filter5.group"></query-builder>
// Javascript
$scope.fields5 = [
	{
		id: 1,
		name: 'Gender'
	},
	{
		id: 2,
		name: 'Age'
	},
	{
		name: 'Favorite city', id: 4
	}
];

$scope.comparators5 = [
	{ id: 1, name: 'equal to', value: '==' },
	{ id: 2, name: 'not equal to', value: '!=' },
	{ id: 3, name: 'smaller than', value: '<' },
	{ id: 4, name: 'smaller than or equal to', value: '<=' },
	{ id: 5, name: 'greater than', value: '>' },
	{ id: 6, name: 'greater than or equal to', value: 'equal to or greater' }
];

$scope.operators5 = [
	{ name: 'AND', value: '&&' },
	{ name: 'OR', value: '||' }
];

$scope.json5 = null;

$scope.filter5 = {
	group: {
		operator: $scope.operators5[0], rules: []
	}
};

$scope.settings5 = {
	nesting: false,
	onlyAllowFieldsOnce: true,
	addIconClass: 'glyphicon glyphicon-plus',
	removeIconClass: 'glyphicon glyphicon-minus',
	addButtonClass: 'btn btn-sm btn-success',
	removeButtonClass: 'btn btn-sm btn-danger'
};
</script>

<script type="text/ng-template" id="example6">
//HTML
<query-builder title="Query builder" settings="settings6" fields="fields6" operators="operators6" comparators="comparators6" group="filter6.group"></query-builder>
// Javascript
$scope.fields6 = [
{
	name: 'Favorite city', id: 1,
	options: [
		{ label: 'paris', name: 'paris', id: 1 },
		{ label: 'london', name: 'london', id: 2 },
		{ label: 'brussels', name: 'brussels', id: 3 }
	]
},
{
	name: 'Favorite city 2', id: 2,
	options: [
		{ label: 'paris', name: 'paris', id: 1 },
		{ label: 'london', name: 'london', id: 2 },
		{ label: 'brussels', name: 'brussels', id: 3 }
	]
}
];

$templateCache.put('inTemplate',
'<div ng-dropdown-multiselect options="rule.field.options" selected-model="rule.data"></div>'
);

$scope.comparators6 = [
{
	id: 1, name: 'in', value: '->', dataTemplate: 'inTemplate', defaultData: [],
	isValid: function(data) {
		return angular.isArray(data) && data.length > 0;
	}
},
{ id: 2, name: 'equal to', value: '==' }
];

$scope.operators6 = [
	{ name: 'AND', value: '&&' }
];

$scope.settings6 = {
	nesting: false,
	addIconClass: 'glyphicon glyphicon-plus',
	removeIconClass: 'glyphicon glyphicon-minus',
	addButtonClass: 'btn btn-sm btn-success',
	removeButtonClass: 'btn btn-sm btn-danger'
}

$scope.filter6 = {
	group: {
		operator: $scope.operators3[0], rules: []
	}
};
$scope.json6 = null;

$scope.$watch('filter6', function(newValue) {
	$scope.json6 = JSON.stringify(newValue, null, 2);
	$scope.output6Readable = queryService.asReadable(newValue.group);
	$scope.output6String = queryService.asString(newValue.group);
}, true);
</script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-sanitize.min.js"></script>
	<script src="./vendor/dropdown-multi.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
	<script type="text/javascript" src="https://rawgit.com/pc035860/angular-highlightjs/master/angular-highlightjs.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
	<script src="query-builder-directive.js"></script>
	<script src="query-builder-controller.js"></script>
</body>
</html>