AngularJS filter on single field

Question

I would like to use AngularJS to filter users status active or reject. but one user whose name is peter reject. when I use select tag method to show the user whose status is reject and hide the user whose status is Active. Unfortunately, it also show "Peter Reject"'s information, but his status is Active.

My Html file.

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>

My json file:

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

I just want to show the users who status is Reject column, any idea?? Thanks you very much.

Naren Murali · Accepted Answer · 2017-09-27 03:43:17Z

You are adding the filter to all the columns instead add it to a particular column like so.

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

A closing comma was also missing in the above tr tag, I added that also!

Also you need to initialize the select1 variable to a blank string for all the fields to be displayed initially. I am using ng-init to do this. Refer the below line.

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

Collectives™ on Stack Overflow

AngularJS filter on single field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related