Accessing child state to filter results

Question

Using ui-router I have a parent view called current-transactions in which a table is populated with data, and when a user clicks on a tr it displays further information of the selected transaction, in a child state called current-transactions-item.

In the table, in the parent view, there is a drop-down which I want to use as a filter for the items that are displayed in the child view. So one transaction can have multiple items, and if a user selects order number foo123 I want the only that item to display. When I insert an text input into the same view as the displayed results, the items are filtered, but when I insert the input into the parent state, which it needs to be, it fails to filter the results.

<input type="text" name="test" ng-model="testFilter">
<div ui-view></div> //child state where the results are, fails to be filtered

I don't know if I am missing something simple, but I don't know whether to create a custom filter, function, directive etc.

I am using ui-router to route my app, and Angular's components to structure it.

Question

How do I filter results in a child state from an input within a parent state?

.state('current-transactions', {
    url: '/current-transactions',
    component: 'currentTransactions',
})
.state('current-transactions.current-transaction-item', {
    url: '/{transId}',
    component: 'currentTransaction',
})

//parent state

<input type="text" name="test" ng-model="testFilter">
<div ui-view></div> 

//child state

<div ng-repeat="transaction in $ctrl.patents | filter: testFilter">
    //data from ng-repeat displayed
</div>

UPDATE

Found a solution and have left my answer. I used $watch to look for changes in the parent scope. If anyone else has another method of solving this issue, feel free to leave an answer.

Use a service to share the `testFilter` between controllers/states. — bamtheboozle, Oct 18 '17 at 09:28

Patrick McDermott · Accepted Answer · 2017-10-18T10:56:18.097

So, in the end it was pretty simple solution. I started creating a service in which the parent controller $watch the input testFilter, invoking the function within the service, but then I realised, I can just $watch the parent $scope from the child controller, like so:

//CHILD CONTROLLER
$scope.$watch('$parent.testFilter', function(n, o){
    $scope.transactionsFilter = n
})

My filter however relies on using a select input, and using $watch on select input is a little more complex than your simple text input, so I decided to use ngChange instead following Get value when selected ng-option changes. If you want to use $watch follow AngularJS: $watch for a select input instructions.

I invoked a function in my parent controller by using ngChange, which stored the value in a parent scope $scope.filter. In the child controller, I then used '$watch' to watch for any change in the select filter.

<select ng-options="item.name for item in data" ng-model="selectedAppOption" ng-change="transactionFilter(selectedAppOption)" > 
    <option value="" selected>Multiple</option>                                 
</select> //send model as parameter

//PARENT CONTROLLER

$scope.transactionFilter = function(filter) {
    $scope.filter = filter; //UPDATED WHEN SELECT VALUE IS CHANGED
}

//CHILD CONTROLLER

//watch for change in $scope.filter in $parent scope
$scope.$watch('$parent.filter', function(n, o){
    $scope.transactionsFilter = n.patentUI.patentApplicationNumber;
})

Accessing child state to filter results

1 Answers1