Question: In Angular, I have an array like this:

```
$scope.items =["blue","red","pink","yellow"];

```

And another object (that I use for filtering)

```
$scope.filter={"color":{"blue":true, "pink":true},"shape":{"square":true}};

```

I would like to do a `ng-if`, so that

```
<ul>
    <li ng-repeat="n in items" ng-if="n in filter.color">
    </li>
</ul>

```

The ng-repeat would just display the elements in the `$scope.items` that exist in the `$scope.filter`

So, in other words, it would just display **blue** and **pink**

Thanks in advance!

Answer: 
You need a custom filter function:

```
<ul>
    <li ng-repeat="n in items | filter: yourFilter">
    </li>
</ul>

$scope.filter={"color":{"blue":true, "pink":true},"shape":{"square":true}};

$scope.yourFilter = function(item) {
  //will be true when color has a property with the color and it's true
  return $scope.filter.color[item];
}

```
Since `$scope.items` is an array and `$scope.filter` is an object, you need a function to test the values:

```js
angular.module('test', []).controller('testController', function($scope)
  {
  $scope.items =["blue","red","pink","yellow"];
  $scope.filter={"color":{"blue":true, "pink":true}};

  $scope.checkColor = function(value, index, array)
    {
    return $scope.filter.color[value];
    };
  });

```

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test">
<div ng-controller="testController">
<ul>
    <li ng-repeat="n in items | filter : checkColor">{{n}}</li>
</ul>
</div>
</body>
```