在两个组件之间过滤 AngularJS

Question

我知道我可以这样过滤：

<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>

如果 <input type="search" ng-model="searchTable"> 和 <tr ng-repeat="row in $ctrl.rows | filter: searchTable"> 在不同的组件中，我该如何过滤？

这是一个简单的 fiddle.

据我所知，我需要向 searchComponent 添加 $onChanges() 和表达式绑定 bindings: { onChange: '&' }，但不完全了解如何实现它。

谢谢

Answer 1

Here 是有效的 fiddle。您将搜索词存储在父组件中并将其传递给两个子组件。

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

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

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

app.component('tableComponent', {
 template: `
   <h4>{{ $ctrl.title }}</h4>
    <!-- <p>This works</p> 
    <label>Search table</label>
    <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: $ctrl.search">
         <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: {
   search: "<"
  }
});

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="search"></search-component>
    <table-component search="search"></table-component>
  </div>
</div>

Answer 2

您可以尝试在您的组件中使用 emit -on 进行通信，如下面的代码所示。另请检查您更新后的 jsfiddle 以及给定场景的工作示例。

搜索组件控制器：

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

Table 组件控制器：

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

在两个组件之间过滤 AngularJS

Filter between two components AngularJS

javascript

angularjs

binding

components

angularjs-filter