AngularJS - 查看控制器和过滤器控制器

时间:2014-07-13 13:21:34

标签: angularjs angularjs-scope

我有以下问题: 我在AngularJS Applicaiton中有两个视图。我希望显示一些数据的一个视图和另一个显示我的数据视图过滤器的视图。我现在的问题是,如何过滤数据?我只能说Normaly

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

1 个答案:

答案 0 :(得分:0)

这个小型演示可以帮助你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>

JS

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

  ]

});
相关问题