Question

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

更新

找到解决方案并留下我的答案。我使用$watch来查找父作用域中的更改。如果其他人有另一种解决此问题的方法，请随时留下答案。

Answer 1

所以，最后这是一个非常简单的解决方案。我开始创建一个服务，其中父控制器$watch输入testFilter，调用服务中的函数，但后来我意识到，我只能$watch父$scope来自子控制器，如下：

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

我的过滤器依赖于使用select输入，在$watch输入上使用select比简单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;
})

访问子状态以过滤结果

1 个答案: