Angular JS Ng-Repeat Issue

Question

I have a scenario like I want to display the contents which are available in only one array, if its present in another array there is no need to display it.

My html is like

<div ng-repeat="array1Value in array1">
    <div ng-repeat="array2Value in array2">
        <div ng-if="isNotFound(array1,array2Value.id)">
            <span>{{array2Value.name}}</span>
        </div>
    </div>
</div>

My js class is like

var app = angular.module("MyApp",{});

app.controller("MyController",function($scope) {
    $scope.array1 = [
        {
            id:"1",name:"one"
        },
        {
            id:"2",name:"two"
        },
        {
            id:"3",name:"three"
        }
    ];

    $scope.array2 = [
        {
            id:"1",name:"one"
        },
        {
            id:"2",name:"two"
        },
        {
            id:"4",name:"four"
        }
    ];

    $scope.alreadyPrinted = [{}];

    $scope.isNotFound = function(array,value){
        for(i = 0; i < array.length; i++){
            if (value === array[i].id) {
                return false;
            }
        }

        if($scope.alreadyPrinted.indexOf(value) > -1){
            return false;
        } else {   
            $scope.alreadyPrinted.push(value);
            return true;
        }
    }
});

I need only four as my output. But as of now nothing is coming. Please help me to correct the issue.

Joao Polo · Accepted Answer · 2015-08-14 13:49:09Z

1

You need to remove external loop... try this:

<div ng-repeat="array2Value in array2">
    <div ng-if="isNotFound(array1,array2Value.id)">
        <span>{{array2Value.name}}</span>
    </div>
</div>

answered Aug 14, 2015 at 13:49

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

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

Comments

Arjan Treur · Accepted Answer · 2015-08-14 22:08:11Z

If I understand you right, you want True to be returned if the value is not in the first array.

Try this for your isnotFound function:

$scope.isNotFound = function(array,value){
    for(i = 0; i < array.length; i++){
        if (value !== array[i].id) {
            return true;
        }
    }
    return fase;
}

Or maybe even better:

$scope.isNotFound = function(array,value){
    angular.forEach(array, function(item){
        if (value !== item.id) {
            return true;
        }
    });
    return fase; 
}

I'm not sure why you are repeating over the first array and the allreadyPrinted part. Your html can just be:

<div ng-repeat="array2Value in array2">
    <div ng-if="isNotFound(array1,array2Value.id)">
        <span>{{array2Value.name}}</span>
    </div>
</div>

Ankit21ks · Accepted Answer · 2015-08-14 13:35:04Z

0

I think there is problem in your alreadyPrinted code. Your code is displaying 'four' as output. Try to insert one alert box in your code like

for (i = 0; i < array.length; i++) {
    if (value === array[i].id) {
        alert('is not found function called');
        return false;
    }
}

You will see 'four' as output on your browser but for one iteration only. Correct your alreadyPrinted code.alert box will help you to isolate the problem.

answered Aug 14, 2015 at 13:35

Ankit21ks

4851 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular JS Ng-Repeat Issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related