Angular, data in one controller filter to this data in other

Question

At start i want to say im new in angular. Lets say my page look like this:

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>

And how can i make that input in NavController could filter data from ContentController? I want to do this in two controllers.

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

I'm not sure why you want to do this in two controllers, but it will be considerably more difficult. The Search functionality acts on the data in the content controller. I am guessing that your layout is driving your controller design.

There are numerous posts here that discuss techniques for this. This one: Share data between AngularJS controllers is well-regarded.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 11 '15 at 19:24

Mike Feltman

5,160
1
17
38

score 0 · Answer 2 · answered Sep 11 '15 at 19:28

Actually you can just do that in a single controller.

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>

For understanding, i used numbers as data. :) Hope it helps you

I know its easier to do this in one controller but as @MikeFeltman guessed my layout didnt allow me to do this in one controller — user3819713, Sep 11 '15 at 19:57
I think a concern that can come up is having one controller doing too much. I don't know about you, but I'm not keen on a 10,000 line long controller. — clurect, Nov 02 '16 at 13:32

clurect · Answer 3 · 2016-11-02T15:03:23.450

You can have a parent controller over the other two controllers. If you use the controllerAs method you can have controllers inside each other, see Angular Style Guide for helpful information about controllers and controllerAs.

You could write it like that and bind the search model to the ParentController.

Edit: I added another solution that I think is better

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'
  }];

});

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

I stepped away from this for a bit and thought of another idea that doesn't involve using another controller. Here you are using a factory instead to communicate between the controllers. You have to share an object so that when you change the search.term in the input it will change for every reference.

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'
  }];

});

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

Angular, data in one controller filter to this data in other

3 Answers3