7

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:

enter image description here

Improve this question
1

6 Answers 6

Reset to default
5

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>

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

Comments

2

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>
Improve this answer

Comments

0

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>
Improve this answer

Comments

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.

Improve this answer

Comments

0

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/

Improve this answer

Comments

0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.