Question

我正在尝试使用$ filter来过滤从控制器中的JSON文件中检索到的数据集。这是JSON文件中的数据：

[{
    "keyword": "key1",
    "path": "path1"
}, {
    "keyword": "key2",
    "path": "path2"
}, {
    "keyword": "key3",
    "path": "path3"
}, {
    "keyword": "key4",
    "path": "path4"
}, {
    "keyword": "key5",
    "path": "path5"
}]

然后我在控制器中获取数据：

$http.get('/sampleJson.txt').then(function (response) {
    vm.resultSet=response.data;
});

然后我使用$ filter来过滤数据：

vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});

最后，我使用ng-repeat在视图中显示数据：

<tbody>
    <tr ng-repeat="result in vm.results">
    <td><a href="{{result.path}}">{{result.keyword}}</a></td>
   <td>{{result.keyword}}</td>
   </tr>
</tbody>

但是结果变量是空的，没有任何显示。它似乎是非常基本的东西，但我无法弄清楚出了什么问题？ PS：当我在控制器中声明其他变量时：

vm.message="Hello, Angular!"

它显示在视图中。

Answer 1

我使用$ scope编写了一个解决方案。此解决方案中的过滤器有效。我不知道为什么你使用vm，但$ http服务同样工作，行

vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});

应该在then（）函数的主体中。

这是一个插件

https://plnkr.co/edit/gwx90oN0cf62JuUF5t2k?p=preview

Answer 2

$http是异步的，.then（vm.resultSet=response.data;）在promise

之后执行（当vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});得到解决时）

试试这个，

$http.get('/sampleJson.txt').then(function (response) {
    vm.resultSet=response.data;
    vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});
});

Angularjs使用$ filter过滤器

2 个答案: