2017-10-18 117 views
3

使用ui-router我有一个父视图称为current-transactions其中一个表被填充数据,并且当一个用户点击一个tr它显示所选择的交易的详细信息,在子状态称为current-transactions-item访问子状态以筛选结果

在表中,在父视图中,有一个下拉列表,我想用它作为筛选器显示在子视图中的项目。所以一个交易可以有多个项目,如果用户选择订单号码foo123我希望只显示该项目。当我将text input插入与显示结果相同的视图中时,项目会被过滤,但是当我将input插入到它所需的父状态时,它无法过滤结果。

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

我不知道如果我失去了一些东西简单,但我不知道是否要创建一个自定义过滤器,函数,指令等

我使用ui-router路由我的应用程序,和Angular的components来构造它。

问题

如何从父州内的输入滤波器在子状态的结果吗?

.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

找到了解决方案,并已离开我的答案。我使用$watch来查找父范围中的更改。如果其他人有解决这个问题的另一种方法,请随时留下答案。

+1

你试过访问与'$ parent'父? –

+0

在过滤器中您的意思是? –

+1

使用服务在控制器/状态之间共享'testFilter'。 –

回答

0

所以,最后它是非常简单的解决方案。我开始创造一种父控制器$watch输入testFilter,调用服务中的函数,但后来我意识到一个服务,我可以只$watch$scope从孩子控制器,就像这样:

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

我然而过滤器依赖于使用select输入,并且在select上使用$watch输入比简单的text input复杂一些,因此我决定使用ngChange代替Get value when selected ng-option changes。如果您想使用$watch,请按照AngularJS: $watch for a select input的说明操作。

我使用ngChange在我的父控制器中调用了一个函数,它将值存储在父范围$scope.filter中。在子控制器中,我使用'$ watch'来监视选择过滤器中的任何更改。

<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; 
})