Angular 1: filter ng-repeat output depending on object property

Question

I have simple ng-repeat in my view that prints data from objects.

  <div
    ng-repeat="item in toDoItems |
               orderBy: 'createdAt'
               track by item.createdAt"
  >
    <b>Content:</b> {{item.content}}
  </div>

The object that I am printing looks like this:

     {
        "content" : "some content",
        "createdAt" : "1459401001460",
        "completed" : false
      },
      {
        "content" : "some content",
        "createdAt" : "1459401001325",
        "completed" : true
       }

I only want to print items that have value false in "completed" propery.

I have tried this but it would give me error: ng-repeat only objects with specific property value - custom filter?

just use ng-show :) below is my answer

manish
– manish

2016-03-31 05:20:42 +00:00
Commented Mar 31, 2016 at 5:20 — manish
– manish, Commented Mar 31, 2016 at 5:20

Hadi · Accepted Answer · 2016-03-31 05:42:04Z

you can use this format of filter.

var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
  $scope.data =[
       {
         "content" : "some content",
         "createdAt" : "1459401001460",
         "completed" : false
       },
      {
         "content" : "some content",
         "createdAt" : "1459401001325",
         "completed" : true
       },
       {
         "content" : "some content2",
         "createdAt" : "1459401001460",
         "completed" : false
       },
      {
         "content" : "some content",
         "createdAt" : "1459401001325",
         "completed" : true
       },
       {
         "content" : "some content3",
         "createdAt" : "1459401001460",
         "completed" : false
       },
      {
         "content" : "some content",
         "createdAt" : "1459401001325",
         "completed" : true
       }
 ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller="Main">

<div >
    <table class="table table-bordered">
        <tr ng-repeat="d in data | filter: {completed: false }">
            <td>{{d.content}}</td>
        </tr>
    </table>
</div>
   </div>
</div>

Arun · Accepted Answer · 2016-03-31 05:28:52Z

1

Use this custom filter

app.filter('myFilter', function () {
    return function (items) {
        if (!items) {
            return true;
        }
        if (items.length == 0) {
            return items;
        }
        var newItems = [];
        angular.forEach(items, function(item, index){
           if(item.completed==true || item.completed=='true'){
               newItems.push(item)
           }
        })
        return newItems ;
    };
});

And your HTML is:

 <div ng-repeat="item in toDoItems | myFilter track by $index">
        <b>Content:</b> {{item.content}}
  </div>

answered Mar 31, 2016 at 5:28

Arun

1,1856 silver badges12 bronze badges

2 Comments

Kunok Over a year ago

May I ask you what is a good place to put custom filter files?

Arun Over a year ago

I worked lot on performance of the application. On Dev environment it doesn't matter where you place all JS files and how many files you create. I generally place all filters in separate files at module level. But on production environment try to minimize the HTTP requests. For that you have to minify JS code and place all your JS code into 2-3 files maximum.

manish · Accepted Answer · 2016-03-31 05:18:46Z

0

<b ng-show='item.completed==false'>Content:</b> 
<span ng-show='item.completed==false'>{{item.content}}</span>

answered Mar 31, 2016 at 5:18

manish

1,4588 silver badges13 bronze badges

1 Comment

manish Over a year ago

yes it can be, you have to create a custom filter for that and you are done

Subash Selvaraj · Accepted Answer · 2016-03-31 05:25:09Z

0

Use angular filter plugin for this, Change your code like below

Inject

<div
        ng-repeat="item in toDoItems | filterBy: ['completed']: true |
                   orderBy: 'createdAt'
                   track by item.createdAt"
      >
        <b>Content:</b> {{item.content}}
      </div>

answered Mar 31, 2016 at 5:25

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular 1: filter ng-repeat output depending on object property

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related