angularjs - Issues achieving search filter results via shared scope between controllers -
in nutshell, trying text entered in search field associated 1 controller in 1 view display search results in different view associated different controller.
https://jsfiddle.net/fk8j8s7z/2/
the results of whatever name enter in input field in "first view" needs displayed in "second view" (below it's input field) same way display if entered in same name in input field of "second view" (this primary goal).
please note shared 2 way data-binding between 2 input fields not necessary. used experiment/hack/dirty-way try achieve want because don't know of other better way! if of can primary goal work without 2 way data-binding between 2 input fields preferred , extremely grateful! thank in advance!
html/view
<div ng-app="app"> <div ng-controller="first"> <h3>first</h3> begin typing here: tom, dick, or harry </br> <br/><input type="text" ng-model="data1.text" /> </div> <div ng-controller="second"> <h3>second</h3> results of ever name enter in input field in "first view" needs displayed below same way display if entered in same name in input field in "second view" (this primary goal). </br></br> <input type="search" id="search" class="form-control" ng-model="data2.text" ng-change="searchtext = data2.text"> <ul> <li ng-repeat='person in people | filter:searchtext'> {{person.name}} </li> </ul> </div> </div> js
var app = angular.module("app", []); app.factory("sharedscope", function($rootscope) { var scope = $rootscope.$new(true); scope.data = {}; return scope; }); app.controller("first", function($scope, sharedscope) { $scope.data1 = sharedscope.data; }); app.controller("second", function($scope, sharedscope) { $scope.data2 = sharedscope.data; $scope.people = [ { name:'tom' }, { name:'dick' }, { name:'harry' } ] });
just set filter in ng-repeat match same model object ng-model used on input
change
<li ng-repeat='person in people | filter:searchtext'> {{person.name}} </li> to
<li ng-repeat='person in people | filter:data2.text'> {{person.name}} </li> 