Query Builder
Query Builder for Segment Rules.
Component Configuration
Instructions and Params
targetModel | Object
target-model="$ctrl.miRuleModel"
Indicates the element containing the base rule, usually given by the API,
Catalog/RetrieveSegments
onRequestUpdate | Function
on-request-update="$ctrl.miCallbackFunction"
Callback function to retrieve an internal function from the component to request for updates
onChangeModel | Function
on-change-model="$ctrl.miCallbackFunction"
This function is called every time the model gets updates, either the position and/or content.
showRuleId | Boolean
show-rule-id="true"
If we want to display the id icon right nex to the rule.
Used Model
Component Usage
- HTML
<div class="t-content" ng-controller="QueryBuilderExampleController as $ctrl"> <!--CONFIGURATION AND HEADERS--> <div class="c-formSectionHeading"> <strong>Component Configuration</strong> </div> <div class="u-flex u-flexSpaced"> <div class="u-size5of12"> <div> <h5 class="u-delta u-pb++">Instructions and Params</h5> <div><strong>targetModel | Object</strong></div> <code class="u-pb++"> target-model="$ctrl.miRuleModel" </code> <div class="u-pt++ u-pb++"> Indicates the element containing the base rule, usually given by the API, Catalog/RetrieveSegments </div> </div> <div class="u-pb++ u-pt++"> <div><strong>onRequestUpdate | Function</strong></div> <div class="u-pb++"> <code> on-request-update="$ctrl.miCallbackFunction" </code> </div> <div class="u-pb++"> Callback function to retrieve an internal function from the component to request for updates </div> </div> <div class="u-pb++ u-pt++"> <div><strong>onChangeModel | Function</strong></div> <div class="u-pb++"> <code> on-change-model="$ctrl.miCallbackFunction" </code> </div> <div class="u-pb++"> This function is called every time the model gets updates, either the position and/or content. </div> </div> <div class="u-pb++ u-pt++"> <div><strong>showRuleId | Boolean</strong></div> <div class="u-pb++"> <code> show-rule-id="true" </code> </div> <div class="u-pb++"> If we want to display the id icon right nex to the rule. </div> </div> </div> <div class="u-size5of12"> <h5 class="u-delta u-pb++">Used Model</h5> <div ng-bind-html="$ctrl.result" ></div> </div> </div> <div class="c-formSectionHeading"> <strong>Component Usage</strong> </div> <!--COMPONENT CALL--> <inv-query-builder target-model="$ctrl.elements" on-change-model='$ctrl.recordChanges' class="u-mt++"></inv-query-builder> </div>