【问题标题】:Angular js: Access data filtered in ng-repeat (ngRepeat) from controllerAngular js:从控制器访问在 ng-repeat (ngRepeat) 中过滤的数据
【发布时间】:2014-02-01 14:13:39
【问题描述】:

我需要从我的控制器访问已在模板(在 ng-repeat 内)过滤的数据。

这就是我的意思:

我的模板中有这张表:

 <table class="table">
        <thead>
            <th>Name</th>
            <th>Gender</th>
        </thead>
        <tbody>
            <tr ng-repeat="person in persons | filter:query">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
</table>

然后我有一个&lt;select&gt;,用于按性别过滤数据

<h1>Cluster:</h1>
    <select ng-model="query.gender" >
        <option value ="">ALL</option>
        <option value ="male">Male</option>
        <option value ="female">Female</option>
    </select>

这没问题。

如果有人选择了其中一个选项,我需要对过滤后的结果做一些事情。 这就是为什么我的控制器中有一个 $watch 来查找过滤器查询的更改:

$scope.$watch('query.gender', function(newValue, oldValue) {
            // Here is where I need to get filtered results
});

我的问题是:

如何从控制器访问过滤后的内容?

我希望这样最好不必在控制器中进行另一个“过滤”操作......(因为数据已经被过滤了,结果就在内存中的某个地方,对吧?)

【问题讨论】:

  • 我不认为结果存在于内存中,不。 ng-repeat 过滤集合并为每个接受的人生成一个 dom 元素,仅此而已。
  • 感谢@JBNizet 的帮助

标签: angularjs


【解决方案1】:

您可以通过以下方式简化您的代码:

    <tbody>
        <tr ng-repeat="person in (filteredPersons = (persons | filter:query))">
            <td>{{person.name}}</td>
            <td>{{person.gender}}</td>
        </tr>
    </tbody>

之后,您可以在控制器中访问$scope.filteredPersons 或直接在视图中访问{{filteredPersons}} :)

【讨论】:

  • 这个解决方案对我来说更好
【解决方案2】:

我不完全确定,但您可以在控制器中使用过滤器功能。所以试试类似的东西:

$scope.$watch('query.gender', function(newValue, oldValue) {
        var x = $filter('filter')($scope.persons, $scope.query);
});

x 然后应该包含与我认为的表中相同的过滤数据。在这里查看文档:http://docs.angularjs.org/api/ng.filter:filter 了解更多信息。

【讨论】:

  • 第二个参数应该是$scope.query,而不是$scope.query.gender
  • 嗯好的,只是要做更多的调查。我想我为使用 hte $filter 函数编写了错误的代码。
  • 啊好吧!刚刚再次更新了我的代码,但我会恢复它。所以它适用于 $scope.query?
  • 我猜如果没有办法从内存中获取已经过滤的数据,这是正确的答案。我想得到最好的表现。非常感谢!!!
  • @mylescc:您还应该在单击单选按钮时手动过滤控制器中的集合,并将结果保存在范围字段中,并在 ng-repeat 中迭代该字段。这将避免双重过滤。但我怀疑过滤 twi 会产生任何显着的性能差异,除非集合很大。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-13
  • 1970-01-01
相关资源
最近更新 更多