I have some issue with default angularjs filter feature. When the data load first time the data is loading without any filter applied.That is expected and when I selects from the drop down the filter working as expected with the filtered data.But when selects back the All option in the select drop down ,it is not rebinding all the data without out any filter applied.I need to rebind all the data without filter when user selects nothing. AS per my knowledge it should work,I am not sure what I am missing.Here the OldconversationList is array of objects .Each object having again multiple array objects.
And one more Requirement is :
When user selects from dropdown and enter some text in searchtext textbox it has to apply filter with both the search criteria .If user does not select anything from dropdown and enter some text in searchtext textbox the filter should apply for on all the data with entered text. Please help on this
<div class="modal-body">
<div class="row" style="padding-bottom:10px">
<div class="form-group" style="margin:0px">
<label class="control-label col-xs-1">Team</label>
<div class="col-xs-3">
<select ng-model="query" class="form-control input-sm" ng-options="item.TeamID as item.TeamName for item in teams">
<option value="">All</option>
</select>
</div>
<div class="col-xs-6">
<input type="text" id=searchtext" ng-model="textquery" class="form-control form-control-lg" placeholder="Search Here" />
</div>
</div>
</div>
<div ng-repeat="conv in OldconversationList | filter :query">
<div class="chat_list" data-id="{{conv.GroupID}}" ng-click="currconvid !=conv.GroupID ?loadConver(conv):angular.noop()">
<div class="chat_people">
<div class="chat_ib">
<h5>{{conv.GroupName}}
<span class="chat_date">{{ conv.LastMessageDate|date:'MM/dd/yyyy'}}</span></h5>
</div>
</div>
</div>
</div>
</div>
For your requirement of using textquery
as well, just add it as a filter:
"conv in OldconversationList | filter :query | filter :textquery"
The reason your filter is not working as expected when you reselect All
is because Angular sets the model to null
when you choose it again. This does not match the empty value, which is undefined
. You can fix it by setting a watch on the model and converting it back to undefined
if it becomes null
:
$scope.$watch('query', function(vNew, vOld){
if(vNew === null){
$scope.query = undefined;
}
})
Here is a Working Fiddle