Check for empty ng-repeat from controller

Question

I'm a newbie in angularjs. And my template is something like this:

<div ng-repeat="item in values"></div>
<div ng-repeat="item1 in values1"></div>

And my controller:

$scope.openItems = function () {
    $http.get('/api/openItems').success(function (data) {
         $scope.values = data;
    });
};

That is working fine. Now I want to show the items, only if it is empty.

I tried something like this:

$scope.openItems = function () {
    $http.get('/api/openItems').success(function (data) {
    if ($scope.values.length == 0) {
         $scope.values = data;
    } else {
         $scope.values1 = data;
    }
    });
};

Any idea how to check from the controller is a ng-repeat has data in it?

Thanks in advance

_"Now I want to show the items, only if it is empty."_ could you clarify what you mean by that, because I am interpreting that you only want to show the repeat if it is empty? — ajmajmajma, Nov 02 '15 at 18:55
You don't really need controller to check it: [here](http://stackoverflow.com/a/25866317/949476) is the most optimal approach. — dfsq, Nov 02 '15 at 18:56
@ajmajmajma I mean If the first div is empty I want to show the data in it. If the first div has data, I want to show the data in the second one. — srecce, Nov 02 '15 at 19:17

score 1 · Answer 1 · answered Nov 02 '15 at 19:42

Make sure you are initializing the arrays at the top, then you can just do something like this :

 //initialize vars
 $scope.values = [];
 $scope.values1 = [];


$scope.openItems = function () {
    $http.get('/api/openItems').success(function (data) {
    if ($scope.values.length === 0) {
         //you may or may not want to clear the second array if you are toggling back and forth
         $scope.values1 = [];
         $scope.values = data;
    } else {
         //empty the first one so we make the hide/show logic simple
         $scope.values = [];
         $scope.values1 = data;
    }
    });
};

then your html just looks like

<div ng-show="values.length" ng-repeat="item in values"></div>
<div ng-show="values1.length" ng-repeat="item1 in values1"></div>

Here is a quick proof of concept - http://jsfiddle.net/Lzgts/573/

You can also swap the ng-show with ng-if, if you want the divs to actually be taken off the DOM.

score 0 · Accepted Answer · answered Nov 02 '15 at 18:58

0

Depending on how your array is initialized (which we're not seeing) it might not ever have length==0 (for example I think it could be undefined, etc.) you could try:

if ($scope.values.length != 0) {
        $scope.values1 = data; 
    } else {
        $scope.values = data;
    }

answered Nov 02 '15 at 18:58

Cody Braun

659
6
17

My array seems to be not initialized. It's created when the ajax call returns data. – srecce Nov 02 '15 at 19:25
You was right...I should check for undefined. So if (!$scope.values1) {$scope.values1 = data; return;} Make de magic.Thanks ! – srecce Nov 02 '15 at 19:44
@user1246072 don't check for undefined, initialize the scope variables before you use them. – ajmajmajma Nov 02 '15 at 19:45

Check for empty ng-repeat from controller

2 Answers2