ElasticUI - Triggering search/sort with ng-click

Question

This was taken from a e-mail thread between me and the author. I've moved it from e-mail to SO hoping that it may benefit others. ElasticUI can be found here

My Original Question(s)

1. I see that search is eui-enabled by querystring.length. We would like to the search and sorting triggered by buttons, rather than the watch functionality.
2. It's a bit confusing when the search returns no results. Instead of a no results found message it simply returns the deafualt (all) results. Is it possible to make the results empty by default, rather than return all?

Author's Answer

1+2 - this is both possible. In AngularJS, keep in mind what "model" variable you use and connect to your UI / Directives, something along the following lines would make sense

<div eui-query="ejs.MatchQuery('textField', querystring)" eui-enabled="querystring.length"> <input type="text" ng-model="querystring_live" />

<input type="button" ng-click="querystring=querystring_live" /> </div>
<div ng-if="!querystring.length"> No query specified </div>

Notice what happens on a click. You could also wrap an ng-if clause around you're results to only display results when a query has been specified.

When I include this snippet, the ng-if condition doesn't take (the "No query specified" stays at all times) and after submitting the search, results are blank, even if it's query I'm sure should return results.

Being new to angular, an obvious mistake may go over my head. Is there anything obvious that is missing?

Edit Found the issue: Forgot to fill in the field with which to run the query against: eui-query="ejs.MatchQuery('post_title', querystring)" ('post_title' being the ES field)

Answer 1

Although it seems like you may have found the answer I think there's still a bug in the "author answer" (me) you posted above. Seems like I fell for the dot-problem in Angular. This should work better:

<div ng-init="qs_model={live:'', after_click:''}">
            Debug: {{qs_model | json}}
            <h3>Search</h3>
            <div eui-query="ejs.MatchQuery('tweet.text', qs_model.after_click)" eui-enabled="qs_model.after_click.length">                             
                <input type="text" ng-model="qs_model.live" />
                <input type="button" ng-click="qs_model.after_click=qs_model.live" /> 
            </div>
            <div ng-if="!qs_model.after_click.length">No query specified </div>
        </div>

It's cleaner to define qs_model in a controller as opposed to ng-init I demoed above.

Also note that even if eui-query is disabled (no querystring specified), ElasticUI will at this moment still do a MatchAll query behind the scenes (you can choose to hide the results using ng-if).