AngularJS,如何从控制器中获取和设置在 ng-repeat 中定义的过滤器?

AngularJS, how to get and set a filter defined in ng-repeat from within controller?

下面的简单 HTML 块循环遍历 JSON 格式的人员对象列表 显示他们的名字和姓氏。 ng-repeat 上方的两个输入框相应地链接到基于 firstName 和 lastName 的过滤器。到目前为止一切都很好,正在工作。

我的目标是在用户离开页面时在控制器的过滤器字段中捕获用户输入,然后在他们 return 进入页面时重新填充过滤器。我可以 capture/get 通过使用 $scope.$on("$destroy"... 当页面离开时搜索字段值。但是,当我尝试设置这些字段时, $scope.search.firstName = 'John' 我得到一个错误:$scope.search is undefined. 我的目标是使用 cookies 来保留然后重置过滤器字段值,但我不确定为什么设置不起作用以及如何修复它。

<table>
    <tr>
        <td><input type="text" ng-model="search.firstName" /></td>
        <td><input type="text" ng-model="search.lastName" /></td>

    </tr>
    <tr ng-repeat="person in personList | filter:search:strict">
        <td>
            <span class="col-xs-offset-2">
                {{person.firstName}}
            </span>
        </td>


        <td>
            <span class="col-xs-offset-2">
                {{person.lastName}}
            </span>
        </td>

    </tr>
</table>

// 来自控制器的片段

$scope.search.firstName = 'John'; // this does not work, returns error

$scope.$on("$destroy", function () {
    console.log($scope.search.firstName); // this works
    console.log($scope.search.lastName)); // this works
});

如果您得到这个 TypeError: $scope.search is undefined,您应该尝试通过首先将 search 定义为一个对象来设置这些值。

$scope.search = { 'firstName': '', 'lastName': ''};
$scope.search.firstName = 'John';

在过滤器中你必须有相同类型的对象在其他情况下你必须通过属性映射通过属性

按照你的看法试试

<table>
    <tr>
        <td><input type="text" ng-model="search.firstName" /></td>
        <td><input type="text" ng-model="search.lastName" /></td>

    </tr>
    <tr ng-repeat="person in personList | filter:{firstName: search.firstName, lastName: search.lastName}">
        <td>
            <span class="col-xs-offset-2">
                {{person.firstName}}
            </span>
        </td>


        <td>
            <span class="col-xs-offset-2">
                {{person.lastName}}
            </span>
        </td>

    </tr>
</table>

在您的视图中使用搜索变量之前在您的控制器中将其初始化

$scope.search = {firstName: '', lastName:''};