我不太了解Angular控制器中的过滤?

时间:2017-01-28 05:58:00

标签: angularjs

我已经阅读了一些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以进行测试,因为大多数初始记录都处于“已关闭”状态。

enter image description here 如果我在没有任何过滤的情况下使用以下内容,那么我会在页面上填充记录。

<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>

2 个答案:

答案 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'},
  ];