如何使用AngularJS初步过滤客户端上的数据？

-1

我是Angular的新成员，刚刚在你的MVC网站上使用过Angular的课程。我现在试图采取培训中显示的内容，并尝试在我已完成的一个小网站中实施它。我有一个要求，培训没有解决，我不确定如何包含在我的代码中。如何使用AngularJS初步过滤客户端上的数据？

这是一家小公司在离开消息时跟踪客户呼叫的网站。记录可以处于许多状态之一，如打开，关闭，进行中，需要回拨等。

当页面启动时，我调用一个返回所有记录的Web服务。但是，我希望它最初通过“OPEN”进行过滤，并只显示直到从下拉列表中选择另一个过滤器。所以默认状态是“1”或“OPEN”。

什么是在页面加载后过滤记录的好方法？我假设我需要某种财产，如vm.FilterId 我最初将设置为“1”，然后下拉列表将更改该值？

我将如何去过滤客户端上的数据？

以下是我的名为“call.controller.js”的angualr文件中的API调用。

function callList(){ 
    dataService.get("/api/Call") 
    .then(function(result) { 
     vm.calls = result.data; 
    }, 
    function (error) { 
     handleException(error) 
    }); 
}

这是我的重复，我把我的标记放在表标记内。我假设这可能是我想尝试做某种过滤的地方？

<tr ng-repeat="call in vm.calls">

UPDATE

从什么我了解我应该可以做这样的事情最初筛选？这没有任何回报。状态字段是一个整数。

<tr ng-repeat="call in vm.calls | filter:{ status: 1}">

我可以看到来自API的值。

来源

2017-01-23 Caverman

文档：https://docs.angularjs.org/guide/filter – Claies

谢谢，我也会看看这个。 – Caverman

您可以使用管道过滤ng-repeat指令。

选项1：

<div ng-repeat="call in vm.calls | filter:{ open: value}">

选项2：

Value source: <input type="text" ng-model="search.open"> 
<div ng-repeat="product in products | filter:open">

您可以检查例如here

来源

2017-01-23 20:33:07 doriak

谢谢，我认为这会是一些相似的事情，但不知道如何实现它。我会看看你有的选项1，我假设“开放”将是我将在我的角度文件中设置的属性？那么我会默认为“1”，并将我的下拉列表绑定到该属性？ – Caverman

打开，是您从服务中获得的对象的属性。过滤器将对对象的开放字段和您放置的值进行比较。该值可以是一个模型属性，可以像你说的那样通过下拉列表进行更改。 – doriak

我在我的初始文章中添加了更新。根据您的建议和我迄今为止研究的内容，我提出了这个问题，但它没有显示任何内容。。你有没有看到任何会阻止它工作的东西？ – Caverman

如何使用AngularJS初步过滤客户端上的数据？

回答

相关问题