Question

一开始我想说我是角色的新人。让我们说我的页面看起来像这样：

的index.html：

<body ng-app="application">
 <div class="container">
   <div class="row">

   <div class="col-sm-3 sideBar" ng-controller="NavController">
     <input ng-model"search">
   </div>
   <div class="col-sm-9 content" ng-controller="ContentController">
     <div ng-repeat="meet in meets | filter:search">
       {{ meet.someData }}
     </div>
   </div>

   </div>
 </div>
</body>

如何在NavController中输入可以从ContentController过滤数据？我想在两个控制器中执行此操作。

Answer 1

我不确定你为什么要在两个控制器中执行此操作，但这将更加困难。搜索功能作用于内容控制器中的数据。我猜你的布局正在推动你的控制器设计。

这里有很多帖子讨论这方面的技巧。这一个：Share data between AngularJS controllers备受好评。

Answer 2

实际上你可以在一个控制器中做到这一点。

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = [{
    "id":1
  },{
    "id":2
  },{
    "id":3
  }]

});

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//code.angularjs.org/1.1.1/angular.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl"><input ng-model='find' />
    <div ng-repeat="x in name | filter : find">
      {{x.id}}
    </div>
  </body>

</html>

为了理解，我使用数字作为数据。 :)希望它可以帮助你

Answer 3

您可以在其他两个控制器上拥有父控制器。如果使用controllerAs方法，可以将控制器放在彼此内，请参阅Angular Style Guide以获取有关控制器和控制器的有用信息。

您可以像这样编写它并将搜索模型绑定到ParentController。

编辑：我添加了另一种我认为更好的解决方案

＆＃13;

var app = angular.module('app', []);

app.controller('ParentController', function() {
  this.search = 'p'; //set default just for fun
});

app.controller('NavController', function() {
  //nav stuff

});

app.controller('ContentController', function() {
  this.meets = [{
    data: 'hi'
  }, {
    data: 'potato'
  }, {
    data: 'help me'
  }, {
    data: 'pie'
  }];

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div class="container" ng-controller="ParentController as parentVm">
    <div class="row">

      <div class="col-sm-3 sideBar" ng-controller="NavController as navVm">
        <input ng-model="parentVm.search">
      </div>
      <div class="col-sm-9 content" ng-controller="ContentController as contentVm">
        <div ng-repeat="meet in contentVm.meets | filter:parentVm.search">
          {{ meet.data }}
        </div>
      </div>

    </div>
  </div>
</body>

＆＃13;

我稍稍离开了这一点，想到了另一个不涉及使用另一个控制器的想法。在这里，您使用工厂代替控制器之间的通信。您必须共享一个对象，以便在更改输入中的search.term时，它将针对每个引用进行更改。

＆＃13;

var app = angular.module('app', []);

app.factory('Searcher', function() {
  return {
    search: {
      term: 'p'
    }
  };
});

app.controller('NavController', function(Searcher) {
  //nav stuff
  this.search = Searcher.search;

});

app.controller('ContentController', function(Searcher) {
  this.search = Searcher.search;
  this.meets = [{
    data: 'hi'
  }, {
    data: 'potato'
  }, {
    data: 'help me'
  }, {
    data: 'pie'
  }];

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div class="container">
    <div class="row">

      <div class="col-sm-3 sideBar" ng-controller="NavController as navVm">
        <input ng-model="navVm.search.term">
      </div>
      <div class="col-sm-9 content" ng-controller="ContentController as contentVm">
        <div ng-repeat="meet in contentVm.meets | filter:contentVm.search.term">
          {{ meet.data }}
        </div>
      </div>

    </div>
  </div>
</body>

＆＃13;

Angular，一个控制器中的数据过滤到其他控制器中的数据

3 个答案: