Issue
In the following codepen I am trying to use a filter in the ng-repeat attribute to filter based on which span element is being clicked or on text being entered in the search text box. I am using a table to show trouble ticket data with the columns ID, Ticket Description, Ticket Status and Edit.
The problem is it works when you click on the Open or Closed span but the All span does the opposite of what its intent is. The All span should show all the rows. Attempting to filter in the search box also removes all the data.
How can I show all data when the All span is clicked and enable searching in the text box. The reason I used "filter:searchText:true:Status" is because there are sometimes words in another column (Ticket Description column) that have words like Open and Closed. I've been reading filter documentation but still not sure how to implement this for my purpose. Thank you.
<div class="container" ng-app="myApp" ng-controller="myController">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6 my-auto">
<span ng-repeat="tab in tabs" ng-click="update(tab.value)">{{tab.label}}</span>
</div>
<div class="col-6 my-auto">
<label class="my-auto float-right">Search:
<input ng-model="searchText">
</label>
</div>
</div>
<div class="row table-responsive">
<table id="searchTextResults" class="table table-striped">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Description')">Ticket Description</th>
<th ng-click="sortBy('Status')">Ticket Status</th>
<th>Edit</th>
</tr>
<tr>
<tr ng-repeat="ticket in tickets | filter:searchText | filter:searchText:true:Status | orderBy:sortField:reverseOrder">
<td><a href="#">{{ticket.ID}}</a></td>
<td><a href="#">{{ticket.Description}}</a></td>
<td><a href="#">{{ticket.Status}}</a></td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
Portion of AngularJS code
$scope.tabs = [
{ value: '', label: 'All' },
{ value: 'Open', label: 'Open'},
{ value: 'Closed', label: 'Closed'}
];
$scope.update = function(filterText) {
$scope.searchText = filterText;
}
Solution
So the reason that this is not working for the search bar is because the :true: segment makes it do a strictly equalTo search. In order to fix the issue. Create two different filter variables. One for a strict search applied directly to status. and one for the search field. You will need to rebind the ng-model to var2.
ng-model="var2"
filter:var2
filter:searchText:true:Status
resulting in the following:
ticket in tickets | filter:var2 | filter:searchText:true:Status | orderBy:sortField:reverseOrder
Then on the js side I am going to be a little lazy and just add the code.
$scope.var2="";
$scope.tabs = [
{ value: undefined, label: 'All' },
{ value: 'Open', label: 'Open'},
{ value: 'Closed', label: 'Closed'}
];
Answered By - Zera
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.