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, Aug 14 '15 at 12:00

score 3 · Answer 1 · answered Aug 14 '15 at 12:00

3

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

answered Aug 14 '15 at 12:00

Alexander Strochkov

417
2
8

Could it be becuase I'm using Angular 1.4.4 ? – Aug 14 '15 at 15:15
I've uploaded the project to Git - https://github.com/adamkwadsworth/Customer-Satisfaction-Survey-Dashboard/blob/master/app/src/widget_three.html – Aug 17 '15 at 10:15

score 0 · Accepted Answer · edited May 23 '17 at 10:32

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

score 0 · Answer 3 · edited May 23 '17 at 12:18

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 '17 at 12:18

Community

1
1

answered Nov 23 '16 at 20:22

asherrard

683
1
8
11

AngularJS remove NULL from ng-repeat

3 Answers3