Using an Angular filter with an adjacent component

Question

Using angular 1.6.4 I'm unable to use a filter on an ng-repeat across an adjacent component. In the example I've created a component for the dynamic listing of data (ng-repeat) and then a separate component for the search input. I can't figure out how to pass the data from the search component to the keyfeed component.

app.js

app.component('keyfeed', {
  bindings: { 
    search: '='
  },
  template: `
    <ul>
     <li ng-repeat="record in records | filter:search">{{ record }}</li>
    </ul>
  `,
  controller: function($scope) {
    $scope.records = [
      "Alfreds Futterkiste",
      "Berglunds snabbköp",
      "Centro comercial Moctezuma",
      "Ernst Handel",
    ];
  }
});

app.component('search', {
  bindings: { 
    search: '='
  },
  template: `
    <input type="search" search="$ctrl.search" ng-model="search">
  `,
  controller: function() {
  }
});

index.html

<search search="search"></search>
<keyfeed search="search"></keyfeed>

Plunker: view

Explosion Pills · Accepted Answer · 2017-05-17 22:10:30Z

1

You're missing the $ctrl you need to perform the actual bindings in the templates.

<li ng-repeat="record in records | filter:$ctrl.search">{{ record }}</li>

<input type="search" ng-model="$ctrl.search">

See the updated plnkr

answered May 17, 2017 at 22:10

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

1 Comment

jsheffers Over a year ago

Ahh, so close. Thanks!

Collectives™ on Stack Overflow

Using an Angular filter with an adjacent component

app.js

index.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

index.html

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related