AngularJS remove NULL from ng-repeat

Question

I'm currently developing an AngularJS web application.

What I'm trying to achieve:
List each item using the ng-repeat method and remove any null values.

Correct - One, Two, Three, Four
Incorrect - One, Two, Three, Four, Null (empty ng-repeat item)

Current Problems:
I've tried several methods todo this, including using the ng-hide function and creating a array filter but I can't seem to get either working correctly.

Any help / advice would be helpful!

Array

[ "One", "Two", "Three", "Four", null ]

HTML:

<md-list>
    <md-list-item class="md-3-line" ng-repeat="item in parseQ4P2 track by $index">
        <div class="md-list-item-text">
            <p>{{item}}</p>
        </div>
        <md-divider ng-if="!$last"></md-divider>
    </md-list-item>
</md-list>

Failed Filter:

dashApp.filter('removeBlackItems', function() {
  return function(inputArray) {
    var outArray = [];
    for (var i = 0; i < inputArray.length; i++) {
      if(inputArray[i].length !== 0){
        outArray.push(inputArray[i]);
      }
    }
    return outArray;
  };
});

Why your filter is failed? Can you give me a link to JSFiddle? — steppefox
– steppefox, Commented Aug 14, 2015 at 12:00

Alexander Strochkov · Accepted Answer · 2015-08-14 12:00:22Z

3

You can filter data inside ng-repeat. Try something like this: http://jsbin.com/sufexe/edit?html,js,output

answered Aug 14, 2015 at 12:00

Alexander Strochkov

4172 silver badges8 bronze badges

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

2 Comments

user4495161 Over a year ago

Could it be becuase I'm using Angular 1.4.4 ?

user4495161 Over a year ago

I've uploaded the project to Git - github.com/adamkwadsworth/…

Community · Accepted Answer · 2017-05-23 10:32:59Z

0

HTML:

.filter('emptyFilter', function() {
  return function(array) {
    var filteredArray = [];
      angular.forEach(array, function(item) {
        if (item) filteredArray.push(item);
      });
    return filteredArray;  
  };
}

Controller JS:

.filter('emptyFilter', function() {
  return function(array) {
    var filteredArray = [];
      angular.forEach(array, function(item) {
        if (item) filteredArray.push(item);
      });
    return filteredArray;  
  };
}

Anwser URL - AngularJS remove empty value

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Aug 18, 2015 at 10:56

user4495161

Comments

Community · Accepted Answer · 2017-05-23 12:18:31Z

0

as seen in ng-repeat filter null value not displaying there's no need for a custom filter. Ese angular's existing filter functionality to remove null objects from array in the template/view

<ul ng-repeat="item in items| filter:{item:'!'} track by $index">
    <li>{{item.name}}</li>
</ul>

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 23, 2016 at 20:22

asherrard

6811 gold badge8 silver badges11 bronze badges

Collectives™ on Stack Overflow

AngularJS remove NULL from ng-repeat

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related