AngularJS-视图控制器和过滤器控制器

debugcn 发表于 Dev

墓

我有以下问题：我的AngularJS应用程序中有两个视图。一个视图要在其中显示一些数据，另一个视图要在其中显示数据视图的过滤器。我现在的问题是，如何过滤数据？平常我只能说

<input type="text" ng-model="f.$"/>
 <table>
    <tr ng-repeat="data in DataArray|filter:f">
      <td>{{data.field1}}</td>
      <td>{{data.field2}}</td>
      <td>{{data.field3}}</td>
    </tr>
 </table>

因此在此示例中它是有效的，因为它的作用域相同。但是，当我有两个独立的示波器时，该如何做到这一点。因此，在我的示例中，它看起来像这样：

<!-- FILTER VIEW -->
<div ng-controller="filterController">
   <input type="text" ng-model="f.$"/>
</div>
....
....
<!-- TABLE VIEW-->
<div ng-controller="tableController">
 <table>
    <tr ng-repeat="data in DataArray|filter:f">
      <td>{{data.field1}}</td>
      <td>{{data.field2}}</td>
      <td>{{data.field3}}</td>
    </tr>
 </table> 
</div>

除夕

那个小演示应该帮助您http://jsbin.com/duzaxa/1/edit?html,js,output

<body ng-app="app">
  <div ng-controller="filterController">
    <input type="text" ng-model="myfitler.$"/>

  </div>
 <div ng-controller="tableController">

 <table>
<tr ng-repeat="data in DataArray|filter:myfitler.$">
  <td>{{data.field1}}</td>
  <td>{{data.field2}}</td>
  <td>{{data.field3}}</td>
</tr>

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

app.factory("filterService", function(){

  var _filter = {}
  {

    return {

      filter:_filter

    }

  }

})
app.controller("filterController", function($scope, filterService){

  $scope.myfitler = filterService.filter




})
app.controller('tableController', function($scope, filterService){
  $scope.myfitler = filterService.filter
  $scope.DataArray = 
    [
    {field1:1,field2:"mike",field3:"student"},
      {field1:2,field2:"john",field3:"techer"},
      {field1:3,field2:"tim",field3:"studend"},
      {field1:4,field2:"jessie",field3:"studend"}

  ]

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。