YousefED / ElasticUI

AngularJS directives for Elasticsearch
http://www.elasticui.com
Other
526 stars 138 forks source link

Add filter to radio buttons #77

Open SthPhoenix opened 8 years ago

SthPhoenix commented 8 years ago

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 ;)