Angularjs的ng-repeat带过滤器作用域对象

Angularjs ng-repeat with filter scope object

本文关键字：作用域 对象 过滤器 ng-repeat Angularjs      更新时间：2023-09-26

我需要根据$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"
  }]
});

'任何建议和帮助都是非常感谢的。:)

你可以在ng-repeat中使用angular filter函数来比较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/

$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的回答:DOM过滤器可能会对性能产生影响，假设我们正在处理大型数据集(例如$scope)。customerData有数千个客户)。在这种情况下，最好在控制器中进行过滤，除非您需要与过滤器进行用户交互。如果您的过滤器对象动态更新，只需$watch它的变化，然后在更改

时呈现customerData
相关文章：