我已经阅读了一些Angular文档,并且已经看到了一些示例,但我仍然不清楚我如何能够像我需要的那样进行过滤。希望有些人可以帮我清理一下。
我所拥有的是一个API,它将检索状态为Open,Closed,Pending,Urgent的记录列表。我的想法是,我会将所有记录恢复并发送到页面。我还获得了这些状态的列表,因此它们填充在下拉列表中。当页面加载时,我想首先显示Open记录,然后当用户从下拉列表中选择一个时切换到不同的记录状态。
所以,我知道你如何签署一系列过滤的项目,如this.filteredArray = filterFilter(this.array, {status:'Open'});
,但如果我在我的ng-repeat
中使用它,则其他记录将不可用,因为该数组只有'打开'记录,没有其他......正确吗?
如果我使用包含其中所有记录的数组(目前大约有415条记录),那么它将首先显示所有记录,并且在有人从下拉列表中选择之前不进行任何过滤。
我尝试了<span ng-repeat="vm in ctrl.allRecordsArray | filter={status:'Open'}">{{vm.name}}</span>
示例,但这似乎对我不起作用。即使它确实如此,我也不知道如何将其与更改数据的下拉列表联系起来。
我确信有人做过类似的事情。我找不到任何例子。
更新
在调试器中,我可以看到从数据库调用返回的记录(428条记录)。我还可以看到名为“StatusName”的属性,在此屏幕截图中,您可以看到它显示为“已关闭”。我正在筛选Closed以进行测试,因为大多数初始记录都处于“已关闭”状态。
如果我在没有任何过滤的情况下使用以下内容,那么我会在页面上填充记录。
<tr ng-repeat="call in vm.calls">
如果我使用以下内容尝试过滤数据,则不会将任何内容写入页面。
<tr ng-repeat="call in vm.calls | filter={StatusName: 'Closed'}">
看起来代码是正确的,所以我迷失了为什么它不起作用。这几乎就像对象属性值中存在某种空格或字符,导致它无法正确匹配和/或过滤。
我不确定这是否会影响到这个问题但是为了以防万一,这是我的下拉列表代码。
<select id="categoryId"
class="form-control"
ng-model="vm.selectedCategory"
ng-options="item.StatusName for item in vm.callStatus track by item.Id">
</select>
答案 0 :(得分:1)
就我对你的问题的理解而言,你应该使用dropdownlist model in your filtering
而不是使用常量名称
来自:
<span ng-repeat="vm in ctrl.allRecordsArray | filter={status:'Open'}">
致:
<span ng-repeat="vm in ctrl.allRecordsArray | filter={status: your_dropdownlist_model}">
这样,过滤将基于your_dropdownlist_model值。每当您更改下拉列表值时,它都会根据下拉列表中的更改值自动过滤。
答案 1 :(得分:0)
您可以为过滤器提供自己的模型,并允许用户单独更改模型。
<强> Here is a working plunker. 强>
在您看来:
<button ng-click="currentStatus = ''">All</button>
<button ng-click="currentStatus = 'Open'">Open</button>
<button ng-click="currentStatus = 'Closed'">Closed</button>
<ul>
<li ng-repeat="vm in items | filter: {status: currentStatus}">{{vm.name}}</li>
</ul>
在你的控制器中:
$scope.currentStatus = 'Open';
$scope.items = [
{'status': 'Open',
'name': 'Open1'},
{'status': 'Open',
'name': 'Open2'},
{'status': 'Open',
'name': 'Open3'},
{'status': 'Open',
'name': 'Open1'},
{'status': 'Closed',
'name': 'Closed1'},
{'status': 'Closed',
'name': 'Closed2'},
];