如何在 angularjs 上定义自定义的多值过滤器？

Question

所以，我想创建一个自定义过滤器来按多个值（特别是 buildingUse 和 client）进行搜索，如下图所示。

我想根据这些属性检索与在搜索栏上键入的 text 匹配的值。那么我该如何实现呢？

其实我的代码是：

HTML:

<form role="form">
<div class="container"> 
  <md-content layout-padding="">
    <div layout="row" layout-wrap>
      <md-input-container class="md-block" flex-gt-sm="">
        <label>Search Buildings</label>
        <input name="search" ng-model="search.$">
      </md-input-container>
    </div>
  </md-content>

  <table style="width: 100%;" >
     <thead>         
      <tr>
        <th ng-click="order('buildingName')">Building Name</th>
        <th ng-click="order('client')">Client</th>
        <th ng-click="order('buildingUse')">Building Use</th>
        <th ng-click="order('addressline1')">Address</th>
        <th ng-click="order('city')">City</th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="build in allbuildings | orderBy:predicate:reverse | filter:paginate| filter:search" >
      <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.buildingName}} 
      </td>
      <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.client}}
      </td>
      <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.buildingUse}}
      </td>                          
      <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.addressline1}}
      </td>
      <td data-ng-click="goto_detail(build.id,build.buildingName)">{{build.city}} 
      </td>
    </tr>
    </tbody>
  </table>

</div>
</form>

JS:

var App = angular.module('myApp', []);
App.controller('buildingdisplayController', ['$scope', '$rootScope', '$http', '$location',
  function($scope, $rootScope, $http, $location, $localStorage) {

    $http.get('/api/buildingslist')
      .success(function(data) {
        $scope.allbuildings = data;
      })
      .error(function(data) {
        console.log('error');
      })

    $scope.order = function(predicate) {
      $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
      $scope.predicate = predicate;
    };
  }
]);

Answer 1

真诚的我不知道我是否理解你的问题，但我做了这个片段：

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

app.controller('mainCtrl', function ($scope) {
  $scope.builds = [];
  
  function generate_builds() {
    for (var i = 1; i <= 10; i++) {
      $scope.builds.push( 
        {  
          "buildingName":"Build " + Math.floor(Math.random() * 999),
          "client":"Client " + Math.floor(Math.random() * 999),
          "buildingUse":"Use 150", // It's default
          "address":"Address "+ Math.floor(Math.random() * 999),
          "city":"City " + Math.floor(Math.random() * 999)
       }
     );
    }
  }
  
  generate_builds();
});

app.filter('customFilter', function() {
  return function(items, search) {
    if (!search) {
      return items;
    }    

    var searchArray = search.replace(/[^a-zA-Z0-9\u0080-\u00FF ,]+/g, " ").trim().split(', ');
    // [0] = buildingUse
    // [1] = client
    if (searchArray.length > 2) {
      return items;
    }
    return items.filter(function(element) {
       return searchArray[1] ? element.buildingUse.indexOf(searchArray[0]) != -1 && element.client.indexOf(searchArray[1])  != -1 : element.buildingUse.indexOf(searchArray[0]) != -1 || element.client.indexOf(searchArray[1])  != -1;
    });
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <hr>
  <div class="col-md-8">
    <input class="form-control" type="text" ng-model="search" placeholder="Search by client or by building use">
  </div>
  <p>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Building Name</th>
          <th>Client</th>
          <th>Building Use</th>
          <th>Address</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="c in builds | customFilter: search">
          <td ng-bind="c.buildingName"></td>
          <td ng-bind="c.client"></td>
          <td ng-bind="c.buildingUse"></td>
          <td ng-bind="c.address"></td>
          <td ng-bind="c.city"></td>
        </tr>
      </tbody>
    </table>
</body>

</html>

我制作了一个自定义过滤器，其定义与您在图片中发布的相同：

第一个参数应该是搜索buildingUse，第二个参数应该是搜索client。

希望对您有所帮助！

如何在 angularjs 上定义自定义的多值过滤器？

How to define a customized multi-value filter on angularjs?

angularjs

angularjs-filter