multi select checkbox without refresh

[mastermind1981]

trafficstars

Hi everyone,

I want only to share the sequel of the issue 9 with a widget like euiChecklist with the difference that it lets intact the checkbox when filtering. May be it should be added to the doc as an example of how to create custom directive upon elastic ui. So, for the directive (it may be added like this in the project) :

angular.module('elasticui')
    .directive('euiMultiSelectFilter', ['$parse', function($parse) {
        return {
            templateUrl: 'PathToThisFile/multiselect.html',
            restrict: 'E',
            scope: true,
            link : {
                'pre': function(scope, element, attrs) {
                    elasticui.util.AngularTool.setupBinding($parse, scope, attrs, ['field', 'size']);
                    scope.agg_name = scope.field.replace(/[^a-z_0-9]/gmi, '_') + '_' + (elasticui.widgets.directives.default_agg_count++);
                }
            }
        };
    }]);

The template file may reside in your project :

<div class="form-group" eui-aggregation="ejs.TermsAggregation(field).field(field).size(size)" eui-filter-self="false" eui-or-filter>
  <div ng-repeat="bucket in aggResult.buckets">
    <label class="checkbox" eui-filter="ejs.TermsFilter(field, bucket.key)">
      <input type="checkbox" ng-model="filter.enabled">
      <div class="text-u-c">
    <small>{{bucket.key}}</small>

                                                <span class="badge">{{bucket.doc_count}}</span>
                                            </div>
      </input>
    </label>

  </div>
        <div class="text-u-l text-center">
                                    <a href=""  ng-click="size = size +10" ng-show="(size <= aggResult.buckets.length) && size !=0">Plus
                                        <span class="fa fa-chevron-circle-down"></span>
  </a>
  </div>

</div>

PS: There is two selector used inside the template the bootstrap badge and the font awesome chevron.

[YousefED]

Very cool and thanks for sharing! Great to see you're able to use the core elasticui components to easily build your own widgets (which is exactly the goal of the libary; rapid development of interfaces on top of Elasticsearch).

I'm not sure yet where would be a good place for sharing these directives. The widgets in the project are mainly used as demo of how to use the ElasticUI components; I don't intend to build a fully supported collection of different drop-in widgets at this moment. Suggestions are welcome :)

On a side note; what kind of project are you using ElasticUI for? Would love to hear more about how people are using it!

[mastermind1981]

Hi Yousef,

I'm working on a classified ads site.

[mastermind1981]

I have also made a sort component using euiSort that i will share ASAP.