javascript - 单个字段上的 AngularJS 过滤器

Question

我想使用 AngularJS 来过滤用户状态为活跃或拒绝。 但一位名叫 peter 的用户拒绝了。 当我使用选择标记方法显示状态为拒绝的用户并隐藏状态为事件的用户时。 不幸的是，它也显示了“Peter Reject”的信息，但他的状态是 Active。

我的 HTML 文件。

Status: 
<select class="select" ng-model="select1">
       <option value="Active">Active</option>     
        <option value="Reject">Reject</option>
 </select>

 <table>
      <th>Name</th>
      <th>Status</th>
    <tr ng-repeat="item in items | filter : select1>
      <td>{{item.name}}</td>
      <td>{{item.status}}</td>
    </tr>
</table>

我的 json 文件:

 [{"name":"joe jonas","status":"Active"},
{"name":"Peter Reject","status":"Active"},
{"name":"Marilyn Monroe","status":"Reject"}]

我只想显示状态为“拒绝”列的用户，知道吗？？ 非常感谢。

Answer 1

您正在将过滤器添加到所有列，而不是像这样将其添加到特定列。

    <tr ng-repeat="item in items | filter : {status:select1}">
      <td>{{item.name}}</td>
      <td>{{item.status}}</td>
    </tr>

上面的 tr 标签中也缺少一个结束逗号，我也添加了它!

您还需要将 select1 变量初始化为空字符串，以便初始显示所有字段。我正在使用 ng-init 来执行此操作。请引用以下行。

<div ng-controller='MyController' ng-app="myApp" ng-init="select1 = ''">

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.items = [{
    "name": "joe jonas",
    "status": "Active"
  }, {
    "name": "Peter Reject",
    "status": "Active"
  }, {
    "name": "Marilyn Monroe",
    "status": "Reject"
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp" ng-init="select1 = ''">
  <select class="select" ng-model="select1">
    <option value="Active">Active</option>
    <option value="Reject">Reject</option>
  </select>

  <table>
    <th>Name</th>
    <th>Status</th>
    <tr ng-repeat="item in items | filter : {status:select1}">
      <td>{{item.name}}</td>
      <td>{{item.status}}</td>
    </tr>
  </table>
</div>