Question

我目前正在开发AngularJS网络应用程序。

我想要实现的目标：
使用ng-repeat方法列出每个项目并删除任何空值。

正确 - 一，二，三，四 不正确 - 一，二，三，四，空（空ng重复项）

当前问题：
我已经尝试了几种方法，包括使用ng-hide功能和创建阵列过滤器，但我似乎无法正常工作。

任何帮助/建议都会有所帮助！

阵列

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

过滤失败：

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

Answer 1

您可以过滤ng-repeat内的数据。尝试这样的事情：http://jsbin.com/sufexe/edit?html,js,output

Answer 2

HTML：

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

控制器JS：

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

Anwser网址 - AngularJS remove empty value

Answer 3

如ng-repeat filter null value not displaying所示，不需要自定义过滤器。 Ese angular的现有过滤器功能，用于从模板/视图中的数组中删除空对象

<ul ng-repeat="item in items| filter:{item:'!'} track by $index">
    <li>{{item.name}}</li>
</ul>

AngularJS从ng-repeat中删除NULL

3 个答案: