AngularJS remove empty value

Question

What I'm trying to achieve:
List each value from an array without displaying the empty (Null) value.

e.g Item #1, Item #1, Item #2

Current Problems: I've tried several filters todo this task, but I can't remove the empty list item (see diagram).

Thank you in advance for any assistance/help.

Controller JS:

$scope.array = ["Item #1","Item #1","","","","Item #2"];

HTML:

<md-list>
    <md-list-item class="md-3-line" ng-repeat="item in array 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>

Visual:

may be this can help you http://stackoverflow.com/questions/26337174/angular-filter-to-remove-blank-strings-from-array — Mudasser Ajaz, Aug 18 '15 at 08:32

score 5 · Accepted Answer · answered Aug 18 '15 at 08:56

You can simply add your custom filter and use it everywhere in application. It is a good solution since standard filter's behavior differs dependent on the version of angularJS. The code would be like that:

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

<ul>
  <li ng-repeat="item in array | emptyFilter">
    <p>{{item}}</p>
  </li>
</ul>

score 2 · Answer 2 · answered Aug 18 '15 at 08:34

You can simply use the ng-if directive:

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

score 0 · Answer 3 · answered Aug 18 '15 at 08:32

Use the ng-hide directive

Check out this code from the site you just need to set the condition correctly.

<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue" class="ng-hide"></div>

<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue"></div>

score 0 · Answer 4 · answered Aug 18 '15 at 08:40

0

ng-if directive you can use to check truthy of the value like ng-if="value" then bind to the element you want to bind.

answered Aug 18 '15 at 08:40

nitin

156
2
13

Evgeny Lukiyanov · Answer 5 · 2015-08-18T09:02:03.347

Don't over complicate things.

Only show your div(row) if item has a value, (note if your item is not a string you may need a different expression, otherwise use this: ( ng-show="item !== ''" ) ):

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

score 0 · Answer 6 · answered Aug 18 '15 at 09:01

You can use a custom filter which removes all the items with empty string.

<div ng-controller="MyCtrl">
    <div class="elem">
        <p ng-repeat="value in array | emptyString">{{value}}</p>
    </div>
</div>

We use the map function to reduce the elements by a custom callback function.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.array = ["Item #1","Item #1","","","","Item #2"];
}]);



myApp.filter("emptyString", 

    function () {           
        return function ( value ) {            
            return value.map(function(elem) {
                if (elem || elem.length !== 0)
                    return elem;
            });
        }
});

Here is the working fiddle: http://jsfiddle.net/HB7LU/16550/

AngularJS remove empty value

6 Answers6

Linked