I have a specific situation where I want to showcase the elements that exist in only one array. If an element is also present in another array, there is no need to display it.
My HTML structure looks like this:
<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>
This is what my JavaScript class entails:
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;
}
}
});
The desired output should only include "four". However, currently nothing is being displayed. Any assistance in resolving this issue would be greatly appreciated.