ElasticUI
ElasticUI copied to clipboard
Add filter to radio buttons
Hi! Got stucked recently while trying to use 'eui-filter' on radio buttons. Trying to directly use the same approach as for checkboxes seemed to be a waste of time. It just can't find filters scope, I have found later, that radio's init a new scope in angular, but using '$parent.' scope seems to have no use too. I found some workaround as follows:
In html:
<!--Init lte and gte parts of filter -->
<div eui-filter="ejs.RangeFilter('date').lte(time.lte)" ng-model="filter.enabled" eui-enabled="true"/>
<div eui-filter="ejs.RangeFilter('date').gte(time.gte)" ng-model="filter.enabled" eui-enabled="true"/>
<!--Radio buttons form-->
<form>
<input name='range_toggle' type="radio" value="now-6h/h" ng-model="time.gte"><b>Last 6 hours</b></input></br>
<input name='range_toggle' type="radio" value="now-12h/h" ng-model="time.gte"><b>Last 12 hours</b></input></br>
</form>
And in js:
$scope.time = {
lte:'now',
gte:'now-6h/h'
}
But I'm new to AngularJS, and I have feeling that there should be better solution using built-in ElasticUI directives. Anyway, maybe my solution would help someone not to waste 3 hours of their precious time ;)