I possess an object named notification which includes the following properties:
EventName
EventDisplayname
SourceName
SourceDisplayname
Message
Utilizing a ng-repeat function, I am able to display notifications fetched from a webservice in a simple table.
In addition, there are 3 filters available:
- events
- sources
- freetext
The HTML code is structured as follows:
<div style="float:left; width:33%;">
<h2>Source-Filter</h2>
<select id="SourceSelector" style="width: 250px;">
<option value=""></option>
<option ng-repeat="source in sources" value="{{source.SourceName}}">{{source.SourceDisplayname}}</option>
</select>
<h2>Event-Filter</h2>
<select id="EventSelector" style="width: 250px;">
<option value=""></option>
<option ng-repeat="event in events" value="{{event.EventName}}">{{event.EventDisplayname}}</option>
</select>
</div>
<div style="float:left; width:33%;">
<h2>Freitext Filter</h2>
<ul>
<li><input type="text" style="width:300px" ng-model="search.text" placeholder="Enter text to filter..."/></li>
</ul>
</div>
<tr ng-repeat="notification in notifications">
<td>{{notification.SourceDisplayName}}</td>
<td>{{notification.EventDisplayName}}</td>
<td>{{notification.Message}}</td>
</tr>
I intend to apply explicit filtering to my ng-repeat using dropdowns and a freetextbox:
- The freetext Textbox should only filter messages
- The event dropdown should solely filter ng-repeats by the notification.eventname lists property
- The source dropdown should exclusively filter ng-repeats by the notification.sourcename lists property
Is it feasible to have multiple explicit property filters for a ng-repeat and how can this be achieved?