angularjs filter | do not filter all object properties

Question

A simple `angularjs' filter implementation is as following:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>angularjs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <input type="text" name="query" value="" placeholder="query" ng-model="q">
    <ol ng-controller="ItemsController">
        <li ng-repeat="item in items | filter: q">
            {{item.name}}
        </li>
    </ol>
</body>
<script type="text/javascript">
    'use strict';
    (function() {
      var app = angular.module('app', []);

      app.value('items', [
        {name: 'Item 3', position: 3, color: 'red', price: 2.75},
        {name: 'Item 1', position: 1, color: 'red', price: 0.92},
        {name: 'Item 4', position: 4, color: 'blue', price: 3.09},
        {name: 'Item 2', position: 2, color: 'red', price: 1.95}
      ]);

      app.controller('ItemsController', function($scope, items) {
        $scope.items = items;
      });
    })();
</script>
</html>

When I search in the input box, it searches all properties of the objects in the items array, including position & price even though only name property is repeated. i.e. If I search 2, it returns with item 1, item 2 and item 3. But I only want item 2. How do I lock the search to only visible properties of the object?

tsiorn · Accepted Answer · 2015-09-10 13:16:19Z

3

Change your filter to be:

<li ng-repeat="item in items | filter: {name: q}">
    {{item.name}}
</li>

Here's a plnkr

answered Sep 10, 2015 at 13:16

tsiorn

2,2361 gold badge23 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

angularjs filter | do not filter all object properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related