Question

我有一个带有属性

的对象notification

EventName
EventDisplayname
SourceName
SourceDisplayname
Message

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

我还有3个过滤器：

事件
来源
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>

我想通过dropwdowns和freetextbox过滤我的ng-repeat显式：

freetext文本框应仅过滤消息
下拉事件应仅按列表notification.eventname属性
下拉源只应通过列表notification.sourcename属性

我可以为ng-repeat使用多个显式属性过滤器吗？我怎么能这样做？

Answer 1

＆＃13;

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;
          })
        }
      });
    }
  ]);

＆＃13;

<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>

＆＃13;

如何通过freetext和多个下拉列表过滤ng-repeat

1 个答案: