找到你要的答案

Q:AngularJS double Array ng-repeat Updated Fiddle: Using Angular 1.4.4

Q:AngularJS双数组NG重复 更新:使用角的小提琴

I'm currently developing an AngularJS web application.

What I'm trying to achieve:
List both sets of arrays within one list using ng-repeat and remove null values.

e.g
Value One A, Value One B, Value Two A, Value Two B

Current Problems:
When using ng-repeat it keeps display the array set ["Value One A",null,null,null,"Value Two A"] & ["Value One B",null,null, null,"Value Two B"] instead of listing seperate values.

Any help / advice would be helpful!

Array:

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

我目前正在开发一个AngularJS的Web应用。

What I'm trying to achieve:
List both sets of arrays within one list using ng-repeat and remove null values.

e.g
Value One A, Value One B, Value Two A, Value Two B

Current Problems:
When using ng-repeat it keeps display the array set ["Value One A",null,null,null,"Value Two A"] & ["Value One B",null,null, null,"Value Two B"] instead of listing seperate values.

任何帮助/建议将是有益的!

阵列:

[["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>
answer1: 回答1:

Here's an example of what I was trying to tell you.

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"]
];

You can also flatten the array like so:

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

and then do this:

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

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

Updated Fiddle: Using Angular 1.4.4

It requires you to use track by $index in your 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>

Also the controller was previously defined as

function MyCtrl($scope) {

but you are required to use

.controller

syntax

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

Hopefully that solves it.

Filtering to remove NULL

Fiddle: http://jsfiddle.net/HB7LU/16424/

You can use the .filter() convenience function that is defined on Arrays to remove all null values.

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

Though from a performance standpoint it might be better to just to loop through with a for loop and do it manually.

下面是我想告诉你的一个例子。

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/

Updated Fiddle: Using Angular 1.4.4

它要求您在您的NG重复使用$索引跟踪

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

希望解决它。

Filtering to remove NULL

小提琴:http://jsfiddle.net/hb7lu/16424/

你可以使用。filter()方便的函数,定义数组删除所有空值。

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

虽然从性能的角度来看,它可能是更好地只是循环通过一个for循环和手动做。

answer2: 回答2:

you can use a basic filter (sample at jsbin)

create your non null function filter:

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

and use on show:

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

你可以使用一个基本的滤波器(样品在JSBin)

创建非空函数滤波器:

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

并在展会上使用:

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