1

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>
Improve this question
5
  • The reason it lists separate values is because you only have 1 ng-repeat for nested arrays. You're going to need 1 more ng-repeat if you hope to actually list the separate values. Commented Aug 14, 2015 at 13:56
  • @AR7 do you mean like the above (HTML 2) ? Commented Aug 14, 2015 at 14:09
  • Yeah that'll work, but you might want to look at Rob's answer if you only want to use 1 ng-repeat. It consists of just concatenating the two arrays so that you have 1 array. Commented Aug 14, 2015 at 14:12
  • @AR7 That didn't work ? Commented Aug 14, 2015 at 14:15
  • why don't you merge the two arrays? that would help filtering the null values and get only one array to work with. If not, you need to have two div with ng-repeat so it does the work for both arrays. Commented Aug 14, 2015 at 14:17

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I've tried this and it dosn't change anything, does the version of Angular effect the script? I'm currently using 1.4.4
@adamkwadsworth I'm currently messing with the fiddle in 1.4.4 and you're right about the version messing with things. I'm going to fix that now and update.
@adamkwadsworth check now and let me know if it works
Thank you so much AR7, This worked perfectly! I really do appreciate the extra help today!
@adamkwadsworth Haha just giving back what StackOverflow has given to me over the years. Glad it's solved
|
0

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>
Improve this answer

1 Comment

I tried this but it didn't work, I'm trying to remove empty null value items from ng-repeat. It needs to remove the entire empty li instead of just the text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.