AngularJS filter data between two components

Question

AngularJS filter data between two components

When it comes to filtering data, I usually use the following method:

<input type="search" ng-model="searchTable">
<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in $ctrl.rows | filter: searchTable">
      <td>{{ row.firstName }}</td>
      <td>{{ row.lastName }}</td>
    </tr>
  </tbody>
</table>

If the

<input type="search" ng-model="searchTable">

and

<tr ng-repeat="row in $ctrl.rows | filter: searchTable">

are located in separate components, filtering might require a different approach.

You can view a demonstration on this fiddle.

To separate the components, you may need to include an $onChanges() and utilize expression binding like bindings: { onChange: '&' } within the searchComponent. However, implementing this solution completely might be a bit challenging at first.

I hope this helps clarify things for you. Let me know if you have any further questions.

javascript angularjs binding components angularjs-filter

Answer 1

Answer №1

Click here to see the functional fiddle. The search term is stored in the parent component and passed down to both child components.

var app = angular.module('app', []);

app.controller('appController', function() {
this.searchTerm = "";
});

app.component('searchComponent', {
template: `
  <h4>{{ $ctrl.title }}</h4>
    <label>Search table</label>
    <input type="search" ng-model="$ctrl.searchTerm">
  `,
  controller: function() {
  this.title = 'Search Component';
  },
  bindings: {
  searchTerm: "="
  }
});

app.component('tableComponent', {
template: `
  <h4>{{ $ctrl.title }}</h4>
    <table>
    <thead>
      <tr>
        <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
    <tbody>
      <tr ng-repeat="row in $ctrl.rows | filter: $ctrl.searchTerm">
        <td>{{ row.firstName }}</td>
          <td>{{ row.lastName }}</td>
        </tr>
      </tbody>
    </table>
  `,
  controller: function() {
 this.title = 'Table Component';
    
    this.rows = [
    {firstName: 'Zulu', lastName: 'Apple'},
      {firstName: 'Alice', lastName: 'xRay'},
      {firstName: 'Fred', lastName: 'Rogers'}
    ];
  },
  bindings: {
  searchTerm: "<"
  }
});

body {
  font-family: 'Arial', sans-serif;
}
table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid grey;
  padding: 5px;
}
label {
  display: block;
}
input {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appController">
    <h3>Filter Between Components</h3>
    <search-component search="searchTerm"></search-component>
    <table-component search="searchTerm"></table-component>
  </div>
</div>

Answer 2

Click here to see the functional fiddle. The search term is stored in the parent component and passed down to both child components.

var app = angular.module('app', []);

app.controller('appController', function() {
this.searchTerm = "";
});

app.component('searchComponent', {
template: `
  <h4>{{ $ctrl.title }}</h4>
    <label>Search table</label>
    <input type="search" ng-model="$ctrl.searchTerm">
  `,
  controller: function() {
  this.title = 'Search Component';
  },
  bindings: {
  searchTerm: "="
  }
});

app.component('tableComponent', {
template: `
  <h4>{{ $ctrl.title }}</h4>
    <table>
    <thead>
      <tr>
        <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
    <tbody>
      <tr ng-repeat="row in $ctrl.rows | filter: $ctrl.searchTerm">
        <td>{{ row.firstName }}</td>
          <td>{{ row.lastName }}</td>
        </tr>
      </tbody>
    </table>
  `,
  controller: function() {
 this.title = 'Table Component';
    
    this.rows = [
    {firstName: 'Zulu', lastName: 'Apple'},
      {firstName: 'Alice', lastName: 'xRay'},
      {firstName: 'Fred', lastName: 'Rogers'}
    ];
  },
  bindings: {
  searchTerm: "<"
  }
});

body {
  font-family: 'Arial', sans-serif;
}
table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid grey;
  padding: 5px;
}
label {
  display: block;
}
input {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appController">
    <h3>Filter Between Components</h3>
    <search-component search="searchTerm"></search-component>
    <table-component search="searchTerm"></table-component>
  </div>
</div>

Answer 3

Answer №2

If you want to establish communication between components, you can utilize the emit - on method. The following code demonstrates how you can implement this. Don't forget to have a look at the updated jsfiddle for a working example of the scenario.

Search Component Controller:

$scope.$watch('searchTable', function() {
  $rootScope.$emit('onEmitSearchData', $scope.searchTable);
});

Table Component Controller:

$rootScope.$on('onEmitSearchData', function(event, data) {
  $scope.searchTable = data;
});

Answer 4

If you want to establish communication between components, you can utilize the emit - on method. The following code demonstrates how you can implement this. Don't forget to have a look at the updated jsfiddle for a working example of the scenario.

Search Component Controller:

$scope.$watch('searchTable', function() {
  $rootScope.$emit('onEmitSearchData', $scope.searchTable);
});

Table Component Controller:

$rootScope.$on('onEmitSearchData', function(event, data) {
  $scope.searchTable = data;
});

AngularJS filter data between two components

Answer №1

Answer №2

Similar questions

What is the best way to dynamically update a state that is deeply nested?

Callback after completion of a for loop in Angular TypeScript

Unusual behavior of leaflet maps in terms of size and tiling arrangements

Python Selenium: Cannot Click on Element - Button Tag Not Located

Is there a way to implement a JavaScript || operator alongside ng-class in AngularJS?

Methods for hiding and showing elements within an ngFor iteration?

Safari having trouble auto-playing Vimeo iframe embed

Can CSS be used to create drop down menus?

Sorting in MongoDB can be done easily using the $sort operator,

What is the process for populating a checkbox with data from a configuration file using JavaScript?

Unraveling a binary file to an mp3 format with the power of Node.js

Retrieving the current date in React from a distinct date format

Using PHP and MySQL to create checkboxes populated with data retrieved from a database, and then submitting two parameters

Localhost Firebase authentication with Facebook integration

Navigating through jSON in Angular using iteration

Copying a class and adding the second item in the duplicated class

The property 'hasClass' cannot be retrieved from an undefined or null reference

Having trouble with the jQuery each function's functionality

Failure to append an object to the array occurs when submitting an HTML form

Is there a way for me to include a prefix in the path where Vue pulls its component chunks from?