帶過濾器作用域對象的AngularJS ng-repeat

Question

我需要根據$scope.filterObject來過濾ng-repeat的行。 我在$scope.customerData中有一個數據，其中包含所有客戶信息，但是在遍歷每個客戶時，我只想根據$scope.filterObject顯示結果。 例如，僅顯示具有$scope.filterObject工作的客戶行。

這是JSFiddle 鏈接 。

這是我到目前為止的內容：

HTML：

<table ng-app="app" ng-controller="AppsCtrl">
  <thead>
    <tr>
      <th>+</th>
      <th>Name</th>
      <th>Email</th>
      <th>DOB</th>
      <th>Hobby</th>
    </tr>
  </thead>
  <tbody ng-repeat="customer in customerData">
    <tr>
      <td><a href="#" class="main" ng-click="expandTable($event)">+</a></td>
      <td>{{customer.name}}</td>
      <td>{{customer.email}}</td>
      <td>{{customer.DOB}}</td>
      <td>{{customer.Hobby}}</td>
    </tr>
    <tr class="showhide">
      <td> </td>
      <td>Degree</td>
      <td>{{customer.Degree}}</td>
      <td>Job title</td>
      <td>{{customer.Job}}</td>
    </tr>
    <tr class="showhide">
      <td></td>
      <td>Country</td>
      <td>{{customer.Country}}</td>
      <td>City</td>
      <td>{{customer.City}}</td>
    </tr>
  </tbody>
</table>

JS：

// AngularJS toggle table

var app = angular.module('app', []);
app.controller('AppsCtrl', function($scope) {
  $scope.expandTable = function() {
    console.log($(event.target).closest('tr').nextUntil("tr.main"));
    $(event.target).closest('tr').nextUntil("tr.main").slideToggle();
    // console.log($(event.currentTarget).parent().parent());
  }
  var data = [{
    "name": "John",
    "email": "JSmith@yahoo.com",
    "DOB": "01/05/1968",
    "Degree": " BSC",
    "Job": "Engineer",
    "Hobby": "Football",
    "Country": "US",
    "City": "Houston"
  }, {
    "name": "Jessica",
    "email": "Jess@yahoo.com",
    "DOB": "03/05/1976",
    "Degree": " Accounting",
    "Job": "CPA",
    "Hobby": "Video games",
    "Country": "US",
    "City": "Fredericks"
  }, {
    "name": "Andrew",
    "email": "AJoan@yahoo.com",
    "DOB": "06/12/1998",
    "Degree": " PHD",
    "Job": "Professor",
    "Hobby": "Writing",
    "Country": "US",
    "City": "San Diago"
  }, {
    "name": "Rich",
    "email": "Rschol@yahoo.com",
    "DOB": "09/21/1988",
    "Degree": " PHD",
    "Job": "Technician",
    "Hobby": "Writing",
    "Country": "US",
    "City": "San Diago"
  }];
  $scope.customerData = data;
  $scope.filterObject = [{
    "Job": "CPA"
  }, {
    "Job": "Engineer"
  }]
});

\\任何建議和幫助都非常感謝。 :)

Answer 1

您可以在ng-repeat中使用角度過濾器功能將customerArray與customerObject比較，然后僅返回與customerObject屬性匹配的元素。

//Instead of array    
$scope.filterObject = {
    "Job": "CPA"
  };

HTML：

  <tr ng-repeat="customer in customerData | filter: filterObject">

否則，您可以創建一個自定義過濾器功能來比較字段或字段數組：

 app.filter('customerFilter', function() {
  return function( items, filterParams) {
    var filtered = [];
    angular.forEach(items, function(item) {
      if(filterParams.Job.indexOf(item.Job) !== -1) {
        filtered.push(item);
      }
    });
    return filtered;

}; }）;

HTML：

   <tr ng-repeat="customer in customerData | customerFilter: filters">

客戶總監：

$scope.filters = {
  "Job" :["Technician","CPA"]
  }

這里的工作示例： https : //jsfiddle.net/Nedev_so/wb1hqeca/

Answer 2

 $scope.customerData = data.filter(function(user){ var found = false; $scope.filterObject.forEach(function(filter){ if(filter.Job === user.Job) found = true; }) return found; }); 

小提琴： https : //jsfiddle.net/nandorpersanyi/yLsxqkx8/

關於Nedev的答案：假定我們正在處理大型數據集（例如$ scope.customerData有數千個客戶），則DOM過濾器可能會對性能產生影響。 在這種情況下，除非需要用戶與過濾器進行交互，否則最好在控制器內進行過濾。 而且，如果您的過濾器對象動態更新，只需$ watch監視其更改，然后在更改后重新呈現customerData