Curly braces in ng-repeat - Syntax?

Question

I am trying to filter a JSON list based on one of the contained values. For example, I have JSON objects where they all have name, type, description etc and I am attempting to filter based on the parameter stored in $stateParams (which happens to be type). It works if I hard code the type (eg "item in items| filter:{Type:'Grain'}").

Also, I know the value from $stateParams is working as I have it set to the page title. Is there a problem with my below syntax?

 <div class="list card">
    <div ng-repeat="item in items| filter:{Type:'{{type}}'}">
      <a class="item item-icon-left" ng-click="onSelectItemList(item)">
        <i class="icon ion-home"></i>
        {{item.Name}}
      </a>
    <div>

Thanks in advance.

Answer 1

Yes, the problem is the filter expects an expression , You should not interpolate ( {{ ) the expression to value.

change

filter:{Type:'{{type}}'}

to

filter:{Type:type}

type is expression evaluated against scope and {{type}} --> Value of expression evaluated against the scope.

Answer 2

Use:

<div ng-repeat="item in items| filter:{Type:type}">

You can't do nested interpolation. Filter is expecting an expression, therefore type is evaluated as is.