Question

我是Angular / JS的新手，所以请善待...... 我有一个问题（可能是我自己试图将我的大脑包裹在Angular周围）有一些代码，我想在一个带有ng-repeat的数据集上使用两个不同的过滤器（我认为）。首先，这是我正在使用的html表单项和数据输出的屏幕截图;

以下是上述设置的基本（精简版）HTML代码;

<div ng-controller="customersCrtl">

      Records Per Page:
      <select ng-model="entryLimit" class="form-control">
        <option>50</option>
        <option>100</option>
        <option>250</option>
        <option>500</option>
        <option>1000</option>
      </select>

      Record Type:
      <select ng-model="entryType" class="form-control">
        <option>All</option>
        <option>Baptism</option>
        <option>Marriage</option>
        <option>Burial</option>
      </select>

      Filter Text:
      <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />

      Filtered {{ filtered.length }} of {{ totalItems }} Total Records

      <div ng-show="filteredItems > 0">
        <table>
          <thead>
            <th>Event Date <a ng-click="sort_by('eventDate');">sort</a></th>
            <th>Event Type <a ng-click="sort_by('type');">sort</a></th>
            <th>Indivdual(s) <a ng-click="sort_by('name');">sort</a></th>
            <th>Location <a ng-click="sort_by('location');">sort</a></th>
            <th></th>
          </thead>
          <tbody>
            <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
              <td>{{data.eventDate | date:'mediumDate'}}</td>
              <td>{{data.type}}</td>
              <td>{{data.name}}</td>
              <td><a href="#">{{data.location}}</a></td>
              <td><a href="#">View Record</a></td>
            </tr>
          </tbody>
        </table>
      </div>

...这里是我目前拥有的相关Angular JS代码;

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
    $http.get('ajax/getMarkers.php').success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 50; //max no of items to display in a page
        $scope.entryType = 'All'; //Record type to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() {
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});

上面Angular代码片段中的

getMarkers.php返回格式如此的JSON结果;

{"id":"646","eventDate":"1576-05-13","name":"John Phillip","type":"Baptism","churchName":"St. Marys","locationid":"563","location":"Swainswick, Somerset, UK","lat":"51.414211","lng":"-2.351418"},
{"id":"647","eventDate":"1577-07-01","name":"Jane Volantyne","type":"Baptism","churchName":"St. Mary the Virgin","locationid":"564","location":"Horsham, Sussex, UK","lat":"51.059750","lng":"-0.330879"},
{"id":"132","eventDate":"1634-05-09","name":"Katherine Stanley","type":"Burial","churchName":"St. James","locationid":"567","location":"Titsey, Surrey, UK","lat":"51.276505","lng":"0.018909"}
... etc. etc.

目前这种方式可以使用 - 就像用户在“过滤器文本”框中键入内容一样，该表更新为仅显示与用户文本匹配的条目。

这很好，但我也希望能够做的是使用下拉“记录类型”框（带有定义的条目All，Baptism，Burial，Marriage）来显示/过滤特定记录表中的“事件类型”。这甚至可能吗？你可以在Angular中对ng-repeat应用两个并发过滤器，因为我已经多次尝试过失败并且即将放弃！

我是在问一些愚蠢的事情还是愚蠢的事情？

Answer 1

是的，它可以根据多个条件过滤表格，你可以在表格中添加一个过滤函数：

<tr ng-repeat="data in filtered = (list | filter:filterEvents | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
     <td>{{data.eventDate | date:'mediumDate'}}</td>
     <td>{{data.type}}</td>
     <td>{{data.name}}</td>
     <td><a href="#">{{data.location}}</a></td>
     <td><a href="#">View Record</a></td>
</tr>

基本上，每次填充表时都会调用$scope.filterEvents，您可以在控制器中使用它来过滤掉所需的项目：

$scope.filterEvents = function(item){
//Here item is the array element from the table
 which is automatically passed in the filter function.

 return item.type.toLowerCase().indexOf($scope.entryType.toLowerCase()) != -1 || 
        item.name.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 
}

其中，$scope.entryType是在下拉列表中选择的选项，$scope.search是搜索的关键字。

Ps：您需要从搜索文本框中删除ng-change=filter()并处理$scope.entryType = "All"

时的返回

Angular JS多重过滤查询

1 个答案: