AngularJS-ng-repeat生成空元素

Question

I have a array which have improper key order, like

1: Array[1]
2: Array[2]
4: Array[3]
7: Array[14]
21: Array[1]
22: Array[1]
23: Array[1] 

So when I iterate using ng-repeat , empty elements and generated for key values which are not there.

So here it will generate elements for keys 1 and 2, and as there is no key 3, it will generate an empty div there.Same happens after 4.three empty elements are generated.How can this be fixed ?

Answer 1

You can either fix the array by creating a new array with proper values or you can add a check in the view for not null or undefined.

Fix the array

var myArray = [[1], [1,2], null, [1,2,3]];
var newArray = [];
angular.forEach(function (myArray, function (a) {
  if (a & a.length) { 
    newArray.push(a);
  }
})l;

Now you can use the new array to render the view

Or fix in the view

<div ng-repeat="item in myArray">
   <div ng-if="item !== null && item !== undefined">
   </div>
</div>

Answer 2

Why you don't use object?

"array":[
    {"key":"1", "content":[]}, 
    {"key":"2", "content":[]}, 
    {"key":"5", "content":[]}, 
    {"key":"3", "content":[]}
]