AngularJS移除空值

Question

我想要实现的目标：
列出数组中的每个值，但不显示空（Null）值。

例如：项目＃1，项目＃2，项目＃3

当前问题： 我尝试了几种过滤器来完成这个任务，但我无法删除空列表项（请参见图示）。

非常感谢您提供的任何帮助/协助。

控制器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>

视觉效果：

这段文字是关于IT技术中的视觉效果，附带了一张图片。

- user4495161

---

也许这可以帮助你：http://stackoverflow.com/questions/26337174/angular-filter-to-remove-blank-strings-from-array - Mudasser Ajaz

Answer 1

您可以添加自定义过滤器，并在应用程序中的任何地方使用它。这是一个很好的解决方案，因为标准过滤器的行为取决于angularJS的版本。代码如下：

.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>

- Anton K

Answer 2

您可以简单地使用ng-if指令：

<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>

- Erazihel

Answer 3

ng-if指令可用于检查值的真实性，例如ng-if="value"，然后绑定到您要绑定的元素。

- nitin

Answer 4

不要过于复杂化事情。

只有在项目具有值时才显示您的div（行）（请注意，如果您的项目不是字符串，则可能需要不同的表达式，否则请使用此表达式：（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>

- Evgeny Lukiyanov

Answer 5

使用ng-hide指令

查看来自网站的此代码，您只需要正确设置条件即可。

<!-- 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>

- Joe Lloyd

Answer 6

您可以使用自定义过滤器，删除所有空字符串的项目。

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

我们使用map函数通过自定义回调函数来减少元素。

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;
            });
        }
});

这里是可工作的 fiddle：http://jsfiddle.net/HB7LU/16550/

- Endre Simo