單個字段上的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>