单个字段上的AngularJS过滤器

Question

我想使用AngularJS过滤用户状态活动或拒绝。 但是名字是彼得拒绝的一个用户。 当我使用选择标记方法来显示状态为拒绝的用户并隐藏状态为活动的用户时。 不幸的是，它还显示“Peter Reject”的信息，但他的状态为“活动”。

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