如何通过免费文本和多个下拉列表过滤ng-repeat

本文关键字：下拉列表 过滤 ng-repeat 何通过 免费 文本 | 更新日期: 2023-09-27 18:07:17

我有一个对象notification，属性为

EventName
EventDisplayname
SourceName
SourceDisplayname
Message

我正在使用ng-repeat，它使用从webservice检索到的通知，并将它们显示在一个简单的表中。

我也有三个过滤器:

  • freetext
这是我的HTML代码: 
<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="Geben Sie ein wonach Sie filtern möchten ..."/></li>
  </ul>
</div>
<tr ng-repeat="notification in notifications">
  <td>{{notification.SourceDisplayName}}</td>
  <td>{{notification.EventDisplayName}}</td>
  <td>{{notification.Message}}</td>
</tr>

我想通过下拉框和freetextbox来过滤我的ng-repeat:

  • freetext文本框应该只过滤
    • 消息
  • 下拉事件应该只通过列表通知过滤ng-repeat。eventname地产
  • 下拉源应该只通过列表通知过滤ng-repeat。sourcename地产

我可以有多个显式属性过滤器的ng-repeat，我怎么能做到这一点?

如何通过免费文本和多个下拉列表过滤ng-repeat

angular
  .module('testApp', [])
  .controller('testCtrl', ['$scope',
    function($scope) {
      // fake data
      $scope.notifications = [{
        eventName: 'event2',
        sourceName: 'source1',
        message: 'blah blah blah 3'
      }, {
        eventName: 'event2',
        sourceName: 'source1',
        message: 'blah blah blah 2'
      }, {
        eventName: 'event3',
        sourceName: 'source3',
        message: 'blah blah blah 1'
      }, {
        eventName: 'event3',
        sourceName: 'source2',
        message: 'blah blah blah 3'
      }, {
        eventName: 'event2',
        sourceName: 'source3',
        message: 'blah blah blah 1'
      }];
      $scope.sources = $scope.notifications.map(function(n) {
        return n.sourceName;
      });
      $scope.events = $scope.notifications.map(function(n) {
        return n.eventName;
      });
      $scope.notificationsFiltered = $scope.notifications;
      $scope.$watchGroup(['eventFilter', 'sourceFilter', 'freetextFilter'], function() {
        // apply event filter
        $scope.notificationsFiltered = $scope.notifications;
        if ($scope.eventFilter) {
          $scope.notificationsFiltered = $scope.notificationsFiltered.filter(function(n) {
            return n.eventName == $scope.eventFilter;
          })
        }
        // apply source filter
        if ($scope.sourceFilter) {
          $scope.notificationsFiltered = $scope.notificationsFiltered.filter(function(n) {
            return n.sourceName == $scope.sourceFilter;
          })
        }
        // apply text filter
        if ($scope.freetextFilter) {
          $scope.notificationsFiltered = $scope.notificationsFiltered.filter(function(n) {
            return n.message.indexOf($scope.freetextFilter) > -1;
          })
        }
      });
    }
  ]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <!-- source filter -->
  <select ng-model="sourceFilter">
    <option value="">No filter</option>
    <option ng-repeat="source in sources track by $index" value="{{source}}">{{source}}</option>
  </select>
  <!-- event filter -->
  <select ng-model="eventFilter">
    <option value="">No filter</option>
    <option ng-repeat="event in events track by $index" value="{{event}}">{{event}}</option>
  </select>
  <!-- text filter -->
  <input ng-model="freetextFilter" type="text">
  <!-- filtered results -->
  <table>
    <tr ng-repeat="notification in notificationsFiltered">
      <td>{{notification.sourceName}}</td>
      <td>{{notification.eventName}}</td>
      <td>{{notification.message}}</td>
    </tr>
  </table>
</div>

相关文章：