AngularJS双阵列ng-repeat

Question

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

我想要实现的目标：
使用ng-repeat列出一个列表中的两组数组并删除空值。

e.g
价值一A，价值一B，价值二A，价值二B

当前问题：
使用ng-repeat时，它会一直显示数组["Value One A",null,null,null,"Value Two A"]＆amp; ["Value One B",null,null, null,"Value Two B"]而不是列出单独的值。

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

阵列：

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

HTML：

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

HTML 2：

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

Answer 1

以下是我试图告诉你的一个例子。

HTML：

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

JS：

$scope.multiArray = [
    ["Value One A", null, null, null, "Value Two A"],
    ["Value One B", null, null, null, "Value Two B"]
];

你也可以像这样展平数组：

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

然后执行此操作：

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

http://jsfiddle.net/HB7LU/16418/

更新了小提琴：Using Angular 1.4.4

它要求您在track by $index

中使用ng-repeat

HTML：

<div ng-controller="MyCtrl">
    <div ng-repeat="array in multiArray">
        <div ng-repeat="item in array track by $index">{{item}}</div>
    </div>
</div>
<br/>
<div ng-controller="MyCtrl">
    <div ng-repeat="item in flattenedArray track by $index">{{item}}</div>
</div>

此外，控制器先前已定义为

function MyCtrl($scope) {

但您需要使用

.controller

语法

JS：

var myApp = angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
    $scope.multiArray = [
        ["Value One A", null, null, null, "Value Two A"],
        ["Value One B", null, null, null, "Value Two B"]
    ];
    $scope.flattenedArray = [].concat($scope.multiArray[0], $scope.multiArray[1]);
});

希望能解决它。

过滤以删除NULL

小提琴：http://jsfiddle.net/HB7LU/16424/

您可以使用在数组上定义的.filter()便利函数来删除所有空值。

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

虽然从性能的角度来看，最好只使用for循环进行循环并手动完成。

Answer 2

您可以使用基本过滤器（jsbin处的样本）

创建非空函数过滤器：

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

并在show上使用：

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