Question

I'm trying to do the following: 1. use ng-repeat to create an html table. 2. use an input field for the user to enter text 3. when the text is contained in a set of specific cells, the relevant rows will perform some kind of animation (lets say change their background color).

I have used till now ng-repeat with the filter option, but it hides the rows which doesn't match the criteria while I wish them to be presented.

This is my current code:

<input id="filterPositions" ng-change="showFiltered()" type="search" ng-model="q.secret" placeholder="filter position..." />
<table> 
<tr ng-repeat="record in (filteredItems = ( body | filter:q:containsComparator ) ) track by record.positionId" ng-class="rowClass(record)">
<td>....</td>
<td>....</td>
<td>....</td>
<td>....</td>
</tr>
</table>

Thanks

Was it helpful?

Solution

I don't think that filter is necessary in this case. You can use simple ng-repeat and ng-class directive for example

<tr ng-repeat="record in allrecords" ng-class="{'containscmp': isContainsComparator(record)}">
  <td>....</td>
  <td>....</td>
  <td>....</td>
</tr>

where $scope.isContainsCoparator(record) function returns true if the record contains user's input

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top