Advanced filtering data using Angular.js

Question

I have a problem that i cannot resolve.

I have a bi-dimensional array and i need to filter the data within it.

Here's a plunker with my code: 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]);
      }

    }
  };
});

I need to filter the data using checkboxes as you can see in the code.

Is there a solution for this?

Moncef Hassein-bey · Accepted Answer · 2015-10-09 22:00:55Z

1

The expression that filter receives can be an object that specify witch property to filter like this :

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

working demo

answered Oct 9, 2015 at 22:00

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilson Nóbrega Over a year ago

The plunker that you mentioned dont work =/ But i need to filter by the girlFriends object =/

Collectives™ on Stack Overflow

Advanced filtering data using Angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related