Question

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

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

以下是我的代码：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]);
      }

    }
  };
});

我需要使用复选框过滤数据，如代码所示。

有解决方法吗？

Answer 1

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

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

working demo

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

1 个答案: