Question

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

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

当前问题： 我已尝试过多个过滤器，但我无法删除空列表项（参见图表）。

提前感谢您的任何帮助/帮助。

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

视觉：

Answer 1

您只需添加自定义过滤器，并在应用程序的任何位置使用它。这是一个很好的解决方案，因为标准滤波器的行为因angularJS的版本而异。代码就是这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 3

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

Answer 4

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

Answer 5

不要过于复杂化。

如果项目有值，则只显示你的div（行）（注意如果你的项目不是字符串，你可能需要一个不同的表达式，否则使用它：（ng-show =＆＃34; item！==＆＃39;＆＃39;＆＃34;））：

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

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

这是工作小提琴：http://jsfiddle.net/HB7LU/16550/

AngularJS删除空值

6 个答案: