Angularjs 使用 $filter 过滤器

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

$http 是异步的，.then (vm.resultSet=response.data;) 在 vm.results=$filter('filter')(vm.resultSet, {keyword: "key1"});

之后执行（当 promise 得到解析时）

试试这个，

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

Answer 2

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

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

应该在 then() 函数的主体中。

这是一个小插曲

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

Angularjs 使用 $filter 过滤器

Angularjs working with $filter filter

angularjs

angular-filters