filter an array with objects with Angular.js

Question

Heading

Hello, I have this $scope array with objects in my Angular.js controller:

$scope.recipes = [
 {
 name :"Ceasar Salad",
 ingredients:["chicken","lettuce"],
 time:"8'"
 },
 {
 name :"Lupus Salad",
 ingredients:["lupus","lettuce"],
 time:"18'"
 }

]

Then I repeat ech object in $scope.recipe

ul(ng-repeat="r in recipes | filter:ingredient")
 li
  h3{{r.name}}
  i(class="fa fa-clock-o")
  span{{r.time}}
  i(ng-class="heart" ng-click="change()")

And use this input with ng-model to filter in my ng-repeat

input(type="text" ng-model="ingredient")

The question is. How can I filter only words that are in each "ingredients" property of each object.

thanks.

probinson · Accepted Answer · 2015-04-07 23:59:00Z

1

Change the ng-model to ingredient.ingredients.

input(type="text" ng-model="ingredient.ingredients")

If you want strict equality change filter:ingredient to filter:ingredient:true

ul(ng-repeat="r in recipes | filter:ingredient:true")

Look at this.

answered Apr 7, 2015 at 23:59

probinson

3612 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

juanObrach · Accepted Answer · 2015-04-07 23:59:16Z

1

Pass through my ng-model input the property "ingredients" find in each object.

input(ng-model="ingredient.ingredients")
enter code here

and then, when I put a filter option in my ng-repeat list I can find only the object that contain the same ingredient write in the input tag.

ul(ng-repeat="r in recipes | filter:ingredient")

I hope that help you if you have the same problem

answered Apr 7, 2015 at 23:59

juanObrach

1581 gold badge5 silver badges14 bronze badges

Comments

Majid Yaghouti · Accepted Answer · 2015-09-02 07:24:05Z

This way of filtering slows down your running speed. A better filtering is like:

In controller:

$scope.recipes = [
        {
            name: "Ceasar Salad",
            ingredients: ["chicken", "lettuce"],
            time: "8'"
        },
        {
            name: "Lupus Salad",
            ingredients: ["lupus", "lettuce"],
            time: "18'"
        }
    ];

$scope.ingredient = "";

$scope.filterByIngredient = function () {
    $scope.filteredRecipes = $scope.ingredient.length ? $filter('filter')($scope.recipes, function (r) {
        return r.ingredients.indexOf($scope.ingredient) > -1;
    }) : $scope.recipes;
};

$scope.filterByIngredient();

In view:

<ul ng-repeat="r in filteredRecipes">
    <li>
        <h3>{{r.name}}</h3>
        <i class="fa fa-clock-o"></i>
        <span>{{r.time}}</span>
        <i ng-class="heart" ng-click=""></i>
    </li>
</ul>

<input type="text" ng-model="ingredient" ng-change="filterByIngredient()" />

If you do filtering in view, angular does it in each digest cycle, however it's not needed unless "ingredient" changes. So, it is better to do it in controller.

Collectives™ on Stack Overflow

filter an array with objects with Angular.js

Heading

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Heading

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related