0

I am using ng-switch to create a filtering input field in the layout. I am switching on the route name and I use this field to filter the data in ng-repeat on each page.

div(ng-controller="NavbarCtrl", ng-switch on="route.current.name")
                input.filter(ng-switch-when='offers',type="text", ng-model="$parent.$parent.search.title")
                input.filter(ng-switch-when='merchants',type="text", ng-model="$parent.$parent.search.name")

The problem with this approach is that the value that I input on one page stays saved when navigating to the other route and filters data on the other page as well. I am using the inbuilt angular search filter, hence the model names.

Can I somehow reset the value of the filter on route change?

Another issue is that I find this $parent.$parent scope access impractical, but i couldn't find a more elegant way.

Any hints greatly appreciated!

glasspill
  • 1,290
  • 4
  • 21
  • 36
  • You shouldn't have to use `$parent` if you are using an object in the parent scope. I.e., if `$scope.search = { ... }` is defined in the parent scope, child scopes (but not directive isolate scopes) can access this object via [normal JavaScript prototypal inheritance](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). – Mark Rajcok Mar 18 '13 at 16:22
  • `$route.current.name` maybe ?? – Mark Rajcok Mar 18 '13 at 16:25
  • on the offers route I have a data table as such tr(ng-repeat="o in offers | filter:search") td {{offer.title}} etc. I can't reach it from the layout with ng-model='search.title' – glasspill Mar 18 '13 at 16:28
  • This should work. I can only guess that you have an isolate scope in between somewhere. – Mark Rajcok Mar 18 '13 at 16:39
  • the 2 scopes have only the $rootScope as common ancestor, both their parents scopes are children of the rootscope – glasspill Mar 18 '13 at 16:56
  • If `search` is explicitly defined as an object on the $rootScope (e.g., in `run()` you could have `$rootScope.search = {}`), then all descendant (non-isolate) scopes should be able to access it via prototypal inheritance. – Mark Rajcok Mar 18 '13 at 17:13
  • search is the inbuilt angular js filter – glasspill Mar 18 '13 at 17:50
  • The built-in filter is [filter](http://docs.angularjs.org/api/ng.filter:filter). On that page, in the example app, `search` is just a $scope property that `filter` uses. You can name that property whatever you want. – Mark Rajcok Mar 18 '13 at 18:55
  • Thank you, now i get it. I misunderstood the filter. Renaming the search variable solved my problem. If you post that as an answer, I will mark it as the correct one. – glasspill Mar 19 '13 at 13:28

1 Answers1

0

As discussed in the comments, the confusion was around the search property, which is not a special filter in Angular, but just the name of a property that will be used with Angular's filter filter.

Also, $parent is not needed if a property on a parent scope object is used/referenced. I.e., if $scope.search = { ... } is defined in the parent scope, child scopes (but not directive isolate scopes) can access this object via normal JavaScript prototypal inheritance.

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492