Filtering Nested Properties in ngRepeat

Question

In my controller I have:

$scope.currentDiscount = new DiscountPrototype;

Where:

var DiscountPrototype = function(){
    this.Id                     =   0;
    this.PromoCode              =   null;
    this.DiscountValue          =   null;
    this.DiscountProducts = []
}

var DiscountProductPrototype = function(discountId,id,catId,catType,name) {
    this.DiscountId             =   discountId;
    this.ProductCategoryType    =   catType;
    this.Name                   =   name
}

And then I push a bunch of new DiscountProductPrototypes into the DiscountProducts array of $scope.currentDiscount. If the DiscountProduct has a ProductCategoryType = "C" it is a category, and if it is "P" it is a product. My filter is intending on only displaying the objects in the DiscountProduct array that are categories.

<div ng-repeat="category in currentDiscount.DiscountProducts | filter:{category.ProductCategoryType: 'C' : true}"
     class="productTile">
  <p>{{category.Name}}</p>
</div>

With the above filter I get the following error:

Syntax Error: Token '.' is at column {2} of the expression [{3}] starting at [{4}].

Which seems to say there's something wrong with:

category.ProductCategoryType

If I do the following, I get no error, but the filter does nothing. Both categories and products are displayed.

<div ng-repeat="category in currentDiscount.DiscountProducts | filter: category.ProductCategoryType='C'" 
     class="productTile">

Do I need to create a custom filter to achieve this kind of filtering?

Answer 1

The problem is with placement of true word. true must be placed after second colon. After first colon, it should be just Expression .

Try following...

<div ng-repeat="category in currentDiscount.DiscountProducts | filter:{ProductCategoryType: 'C'}: true"
     class="productTile">
  <p>{{category.Name}}</p>
</div>

For more information on Filters, refer: https://docs.angularjs.org/api/ng/filter/filter

Answer 2

This should work:

 <div ng-repeat="category in currentDiscount.DiscountProducts | filter:{ProductCategoryType: 'C'}" class="productTile"> <p>{{category.Name}}</p> </div>