CODEWITHSUNDEEP
javascriptangularjs
Joe82
Joe82

Reputation: 1251

Angular 1.6 - ng-if when element in array is a key in another object

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!

Upvotes: 0

Views: 290

Answers (2)

yBrodsky
yBrodsky

Reputation: 5041

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];
}

Upvotes: 2

sthames42
sthames42

Reputation: 1009

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

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];
    };
  });
  
<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>

Upvotes: 1

Related Questions