AngularJS filter on single field

Question

AngularJSを使用して、ユーザーのステータスをアクティブまたは拒否します。 ただし、名前がピーター拒否の1人のユーザー。 私は選択タグメソッドを使用してステータスが拒否されているユーザーを表示し、ステータスがアクティブのユーザーを非表示にします。 残念ながら、 "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>