AngularJS: Dynamic filtering through ng-repeat

Question

I'm trying to filter using dropdown and change value dynamically in ng-repeat, not sure how to do it, any hints?

Dropdown:

<label>Status</label>
<select class="form-control" ng-model="currentlySelected">
    <option value="">All</option>
    <option value="inactive">Inactive</option>
    <option value="active">Active</option>
</select>

Filter condition:

filter disable for All results
filter: {deleted_at : ''} --> Inactive results
filter: {deleted_at : null} --> Active results

View:

<tr ng-repeat="user in users">

Sajeetharan · Accepted Answer · 2018-07-25 17:48:27Z

1

You need something like this,

<li ng-repeat="user in users | filter : {status: currentlySelected}: true">

DEMO

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
  $scope.title = "Filter Based on Select Value";
   $scope.users = [
        {"id":18,"deleted_at" : ''},
        {"id":19,"deleted_at":'null'},
        {"id":21,"deleted_at":''},
        {"id":22,"deleted_at":''},
    ]
}]);

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 
</head>

<body ng-controller="Main">
  <h1>{{title}}</h1>
  <label>Status</label>
   <select class="form-control" ng-model="currentlySelected">
      <option value="">All</option>
      <option value="null">Inactive</option>
      <option value="">Active</option>
   </select>

  <li ng-repeat="user in users | filter : {deleted_at: currentlySelected}: true">
    <h3>{{user.id}}</h3>
 </li>
</body>

</html>

edited Jul 25, 2018 at 17:48

answered Jul 25, 2018 at 17:27

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

JKLM Over a year ago

I need to put conditions for filter as I mentioned in question, like | filter: {deleted_at : ''} how should I do that?

Sajeetharan Over a year ago

what do you mean

JKLM Over a year ago

as there is no column as active or inactive in database Im filtering with deleted_at and deleted_at == null

Sajeetharan Over a year ago

what does those 2 mean inactive and active?

JKLM Over a year ago

filter: {deleted_at : ''} --> Inactive and filter: {deleted_at : null} --> Active users

|

Collectives™ on Stack Overflow

AngularJS: Dynamic filtering through ng-repeat

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related