expression builder angular
Trying to recreate the structure from the google expression builder
HTML
<script type="text/ng-template" id="conditionExpressionBuilder.html">
<div>
<div>
<button ng-click="addNestedCondition(conditions.nestedexpressions)">Add ()</button>
<button ng-click="addNewCondition(conditions.expressions)">Add node</button>
</div>
<div>
<select>
<option ng-selected="{{conditions.operator == operator.value}}" ng-repeat="operator in operators" value="{{operator.value}}">{{operator.display}}</option>
</select>
</div>
<div>
<ul>
<li ng-repeat="expression in conditions.expressions">
<div>
<span>
<button ng-click="delete(expression, conditions.expressions)" ng-disabled="$first">Delete Item</button>
</span>
<span>
<select>
<option ng-selected="{{filterfield.value == expression.filterField}}" ng-repeat="filterfield in filterfields" value="{{filterfield.value}}">{{filterfield.display}}</option>
</select>
</span>
<span>
<select>
<option ng-selected="{{comparator.value == expression.comparator}}" ng-repeat="comparator in comparators" value="{{comparator.value}}">{{comparator.display}}</option>
</select>
</span>
<span><input type="text" value="{{expression.expressionValue}}" /></span>
</div>
</li>
<li ng-repeat="conditions in conditions.nestedexpressions" ng-if="conditions.expressions.length > 0">
<button ng-click="removeNestedCondition($index, $parent.$parent.conditions.nestedexpressions)">Remove ()</button>
<ng-include src="'conditionExpressionBuilder.html'"></ng-include>
</li>
</ul>
</div>
</div>
</script>
<condition-expression-builder...
CSS
font:tahoma,
bgcolor:ffffff
JavaScript
angular.module("expressionBuilderApp", [])
.controller('expressionBuilderController', ['$scope', function($scope) {
$scope.operators = [
{
display: "And",
value: "and"
},
{
display: "Or",
value: "or"
}
];
$scope.filterFields = [
{
display: "Code",
value: "code"
},
{
display: "Capital",
value: "capital"
},
{
display: "Government",
value: "government"
},
{
display: "Population",
value: "population"
}
];
$scope.comparators = [
{
display: "contains",
value: "contains"
},
{
display: "Starts With",
value: "startswith"
},
{
display: "Ends With",
value: "endswith"
},
{
display: "Doest not Contain",
value: "doesnotcontain"
}
];
$scope.conditions = {
operator: "and",
expressions: [
{
filterField: "code",
comparator: "contains",
expressionValue: "moo"
},
{
filterField: "capital",
comparator: "startswith",
expressionValue: "mooest"
},
{
filterField: "government",
comparator: "endswith",
expressionValue: "mooster"
}
...