Arrays AngularJS双数组ng重复

我目前正在开发一个AngularJS web应用程序

我正在努力实现的目标：
使用ng repeat在一个列表中列出两组数组，并删除空值

e、 g
值一A，值一B，值二A，值二B

当前问题：
使用ng repeat时，它会保持显示数组集

[“值一A”，null，null，null，“值二A”]

&

[“值一B”，null，null，null，“值二B”]

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

数组：

[["Value One A",null,null,null,"Value Two A"],["Value One B",null,null, null,"Value Two B"]] 

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

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

HTML:

[["Value One A",null,null,null,"Value Two A"],["Value One B",null,null, null,"Value Two B"]] 

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

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

{{item}}

HTML2:

[["Value One A",null,null,null,"Value Two A"],["Value One B",null,null, null,"Value Two B"]] 

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

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

{{itm}}

这是我想告诉你的一个例子

HTML:

也可以按如下方式展平阵列：

$scope.flattenedArray = [].concat($scope.multiArray[0], $scope.multiArray[1]);

然后这样做：

<div ng-controller="MyCtrl">
    <div ng-repeat="item in flattenedArray">{{item}}</div>
</div>

此外，控制器先前定义为

function MyCtrl($scope) {

但你必须使用

.controller

语法

JS:

希望这能解决问题

筛选以删除空值 小提琴：

可以使用数组上定义的便利函数删除所有空值

console.log($scope.flattenedArray.filter(function(item) {
    return item !== null;
}));

---

虽然从性能的角度来看，使用for循环并手动执行可能更好。

您可以使用基本过滤器（示例位于）

创建非空函数筛选器：

$scope.test = function(value) {
    return value !== null;
};

并在展会上使用：

<p>{{item | filter : test }}</p>

{{item|filter:test}

它列出单独值的原因是，对于嵌套数组，您只有1个ng repeat。如果您希望实际列出单独的值，则需要再重复一次ng。@AR7您的意思是像上面的（HTML 2）一样吗？是的，这很有效，但是如果您只想使用1次ng重复，您可能需要查看Rob的答案。它只是将两个数组连接起来，这样您就有一个数组。@AR7不起作用了？为什么不合并这两个数组呢？这将有助于过滤空值，并只获得一个数组。如果没有，你需要有两个div和ng repeat，这样它就可以对两个数组都起作用。我试过了，它没有改变任何东西，角度的版本会影响脚本吗？我目前正在使用1.4。4@adamkwadsworth我目前正在处理1.4.4中的问题，你说的版本是正确的。我现在要修复并更新它。@adamkwadsworth现在检查一下，让我知道它是否有效。非常感谢AR7，它非常有效！我真的非常感谢今天的额外帮助@adamkwadsworth哈哈，这是StackOverflow多年来给我的回报。很高兴我尝试了这个，但没有成功，我正在尝试从ng repeat中删除空的空值项。它需要删除整个空li，而不仅仅是文本。