I am in need of creating a basic search feature for some items. I have designed a simple control with a button that clears the search query:
<div class="item item-input item-button-right">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text"
placeholder="Search"
ng-model="search">
<button class="button button-icon" ng-if="search" ng-click="search = null">
<i class="icon ion-ios-close-empty"></i>
</button>
</div>
However, it seems that the button is not working as expected. The search variable is being updated correctly, but the change is not reflecting in the view.
After some investigation, I decided to wrap the query string within an object and created a variable called search.query:
<div class="item item-input item-button-right">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text"
placeholder="Search"
ng-model="search.query">
<button class="button button-icon" ng-if="search.query" ng-click="search.query = null">
<i class="icon ion-ios-close-empty"></i>
</button>
</div>
To my surprise, this modification now works perfectly: the query gets cleared out when the button is clicked.
I am left wondering how this is possible. Does angular handle wrapped scope variables differently compared to those that are directly in scope?