使用 Angular.js 的高级过滤数据答案

【问题标题】：Advanced filtering data using Angular.js使用 Angular.js 的高级过滤数据
【发布时间】：2015-10-09 21:35:48
【问题描述】：

我有一个无法解决的问题。

我有一个二维数组，我需要过滤其中的数据。

这是我的代码：Plunker

index.html

<body ng-controller="MainCtrl">
  <div>
    Name to Filter: <input type="text" ng-model="dataFilter.name">
  </div>
  <div>
    <input type="checkbox" ng-click="filterAdvanced(1)"> Mary
    <input type="checkbox" ng-click="filterAdvanced(2)"> Hand
    <input type="checkbox" ng-click="filterAdvanced(3)"> XVideos
    <input type="checkbox" ng-click="filterAdvanced(4)"> Polly
  </div>

    <table border="1">
      <thead>
        <tr>
          <th>Name:</th>
          <th>Age:</th>
          <th>Sex:</th>
          <th>Status:</th>
          <th>Girlfriends:</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="data in arrayTest | filter: dataFilter">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.sex }}</td>
          <td>{{ data.status }}</td>
          <td><li ng-repeat="girlFriend in data.girlFriends">{{ girlFriend.name }}</li></td>
        </tr>
      </tbody>
    </table>

    <div>
      <br>
      <br>
      <br>
      {{ dataFilter }}
    </div>
</body>

app.js

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

app.controller('MainCtrl', function($scope) {

  $scope.arrayTest = [{
    name: 'Jhon',
    age: '25', 
    sex: 'lot', 
    status: 'single',
    girlFriends: [{
      id: 1,
      name: 'Polly',
      age: 18
    },{
      id: 2,
      name: 'Mary',
      age: 19
    }]
  },{
    name: 'Brian', 
    age: '25', 
    sex: 'little', 
    status: 'married',
    girlFriends: [{
      id: 3,
      name: 'Hand',
      age: 25
    },{
      id: 4,
      name: 'XVideos',
      age: 25
    }]
  }];

  $scope.dataTest = [{
      id: 1,
      name: 'Polly',
      age: 18
    },{
      id: 2,
      name: 'Mary',
      age: 19
    },{
      id: 3,
      name: 'Hand',
      age: 25
    },{
      id: 4,
      name: 'XVideos',
      age: 25
    }];

  $scope.dataFilter = {};
  $scope.dataFilter.girlFriends = [];
  $scope.filterAdvanced = function(id){
    if(id != undefined){

      var index = id - 1;
      var allowInsert = true;
      var indexDelete = false;

      if($scope.dataFilter.girlFriends.length > 0){
        $scope.dataFilter.girlFriends.forEach(function(el, idx){
          if(el.id == id){
            allowInsert = false;
            indexDelete = idx;
          }
        });

        if(allowInsert){
          $scope.dataFilter.girlFriends.push($scope.dataTest[index]);
        }else{
          $scope.dataFilter.girlFriends.splice(indexDelete, 1);
        }

      }else{
        $scope.dataFilter.girlFriends.push($scope.dataTest[index]);
      }

    }
  };
});

如您在代码中看到的，我需要使用复选框过滤数据。

有解决办法吗？

【问题讨论】：

标签： javascript arrays angularjs filter angularjs-filter

【解决方案1】：

过滤器接收的表达式可以是一个对象，指定要过滤的巫师属性，如下所示：

<tr ng-repeat="data in arrayTest | filter:{name:dataFilter.name}">

working demo

【讨论】：

你提到的那个plunker不工作=/但我需要按girlFriends对象过滤=/