Filter the ng-repeat in Angular based on the model's value

Question

Within my "Saving" model, there is a field called "Retailer".

I want to implement an ng-repeat directive that displays only items with the same "Retailer" value.

Essentially, I am attempting to rectify this issue.

<div ng-repeat="saving in savings |  filter: { retailer: {{saving.retailer }} | limitTo:10">

However, this code is incorrect.

Is there a way to use the "Retailer" value from the "Saving" model as the filter?

It appears that this solution works:

<div ng-repeat="saving in savings | filter: { retailer: saving.retailer } | limitTo:10">

Answer 1

Answer №1

Here is a solution that should do the trick:

<div ng-repeat="saving in savings | filter: { retailer: 'Retailer' } | limitTo:10">

This code snippet will display the saving objects that have a retailer property with the value of Retailer.

Typically, this functionality is used with an input element where the user can filter the results.

For example, if you have the following input element:

<input type="text" ng-model="filterText">

You can filter the savings using the input element like so:

<div ng-repeat="saving in savings | filter: { retailer: filterText } | limitTo:10">

Answer 2

Here is a solution that should do the trick:

<div ng-repeat="saving in savings | filter: { retailer: 'Retailer' } | limitTo:10">

This code snippet will display the saving objects that have a retailer property with the value of Retailer.

Typically, this functionality is used with an input element where the user can filter the results.

For example, if you have the following input element:

<input type="text" ng-model="filterText">

You can filter the savings using the input element like so:

<div ng-repeat="saving in savings | filter: { retailer: filterText } | limitTo:10">